vue項目部署跨域問題的詳細解決過程
跨域問題在前后端分離項目很常見,至于為什么會跨域,同源策略,百度各種博客都很詳細,這里不再介紹,主要記錄項目中的各種設(shè)置,解決的過程。
首先是后端:
過濾器:
@Configuration public class GlobalCorsConfig { /** * 允許跨域調(diào)用的過濾器 */ @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); //允許所有域名進行跨域調(diào)用 config.addAllowedOriginPattern("*"); // config.addAllowedOrigin("*"); //允許跨越發(fā)送cookie config.setAllowCredentials(true); //放行全部原始頭信息 config.addAllowedHeader("*"); //允許所有請求方法跨域調(diào)用 config.addAllowedMethod("*"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }
如果setAllowCredentials
為true,則config.addAllowedOrigin("*")
的參數(shù)就不能是*,必須指明,這里直接注釋掉,使用addAllowedOriginPattern
Controller層:
路徑里包含了web,這個很重要,記住
yml文件:
后端的端口8086,應(yīng)用上下文路徑:/weijianweiAdminApi
再是前端:
dev.env.js中設(shè)置BASE_API為/web
在index.js中設(shè)置dev里面的proxyTable,這里是在開發(fā)過程中,在node.js上實現(xiàn)的一個轉(zhuǎn)發(fā),將請求轉(zhuǎn)發(fā)到后端,主要解決了開發(fā)過程中的跨域問題。
設(shè)置完這些以后,npm run dev,項目在本地可以運行了
開發(fā)完成以后,項目打包,放到服務(wù)器上:
首先在服務(wù)器的nginx的html文件夾中創(chuàng)建文件夾命名為weijianwei
將npm run build 打包生成的文件放在weijianwei中:
修改index里面的assetsPublicPath為weijianwei,對應(yīng)上面文件夾名稱
設(shè)置nginx配置文件nginx.conf:
server { listen 8099; server_name localhost; location /weijianweiAdminApi/ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; client_max_body_size 200m; proxy_pass http://localhost:8086; } }
監(jiān)聽端口8099,匹配路徑weijianweiAdminApi,將其轉(zhuǎn)發(fā)到http://localhost:8086上,
此時訪問項目:http://localhost:8099/weijianwei 成功出現(xiàn)頁面,登錄時候,預(yù)檢請求通過,正式請求報跨域問題
前端項目prod.env.js設(shè)置 BASE_API:
成功登錄訪問
總結(jié)
到此這篇關(guān)于vue項目部署跨域問題的文章就介紹到這了,更多相關(guān)vue項目部署跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項目實現(xiàn)一鍵網(wǎng)站換膚效果實例(webpack-theme-color-replacer的使用)
換皮膚一般都是點擊一個按鈕彈出一些皮膚的選項,選中選項后皮膚生效,下面這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)一鍵網(wǎng)站換膚效果的相關(guān)資料,文中主要介紹的是webpack-theme-color-replacer的使用,需要的朋友可以參考下2023-02-02vue權(quán)限管理系統(tǒng)的實現(xiàn)代碼
這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01vue導(dǎo)出excel的兩種實現(xiàn)方式代碼
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel的兩種實現(xiàn)方式,在項目中我們可能會碰到導(dǎo)出Excel文件的需求,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-08-08對vue v-if v-else-if v-else 的簡單使用詳解
今天小編就為大家分享一篇對vue v-if v-else-if v-else 的簡單使用詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue + element動態(tài)多表頭與動態(tài)插槽
這篇文章主要介紹了vue + element動態(tài)多表頭與動態(tài)插槽,下面文章圍繞vue + element動態(tài)多表頭與動態(tài)插槽的相關(guān)資料展開文章的內(nèi)容,具有一定的參考價值,需要的小伙伴可以參考一下,希望對大家有所幫助2021-12-12Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細步驟(超詳細)
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01