vue項目部署跨域問題的詳細解決過程
跨域問題在前后端分離項目很常見，至于為什么會跨域，同源策略，百度各種博客都很詳細，這里不再介紹，主要記錄項目中的各種設置，解決的過程。
首先是后端：
過濾器：
@Configuration
public class GlobalCorsConfig {
/**
* 允許跨域調用的過濾器
*/
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//允許所有域名進行跨域調用
config.addAllowedOriginPattern("*");
// config.addAllowedOrigin("*");
//允許跨越發(fā)送cookie
config.setAllowCredentials(true);
//放行全部原始頭信息
config.addAllowedHeader("*");
//允許所有請求方法跨域調用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
如果setAllowCredentials為true，則config.addAllowedOrigin("*")的參數(shù)就不能是*，必須指明，這里直接注釋掉，使用addAllowedOriginPattern
Controller層：
路徑里包含了web，這個很重要，記住
yml文件：
后端的端口8086，應用上下文路徑：/weijianweiAdminApi
再是前端：
dev.env.js中設置BASE_API為/web
在index.js中設置dev里面的proxyTable，這里是在開發(fā)過程中，在node.js上實現(xiàn)的一個轉發(fā)，將請求轉發(fā)到后端，主要解決了開發(fā)過程中的跨域問題。
設置完這些以后，npm run dev，項目在本地可以運行了
開發(fā)完成以后，項目打包，放到服務器上：
首先在服務器的nginx的html文件夾中創(chuàng)建文件夾命名為weijianwei
將npm run build 打包生成的文件放在weijianwei中：
修改index里面的assetsPublicPath為weijianwei，對應上面文件夾名稱
設置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，將其轉發(fā)到http://localhost:8086上，
此時訪問項目：http://localhost:8099/weijianwei 成功出現(xiàn)頁面，登錄時候，預檢請求通過，正式請求報跨域問題
前端項目prod.env.js設置 BASE_API:
成功登錄訪問
總結
到此這篇關于vue項目部署跨域問題的文章就介紹到這了,更多相關vue項目部署跨域內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
對于插槽的概念和使用,這是vue的一個難點,這需要我們靜下心來,慢慢研究,下面這篇文章主要給大家介紹了關于vue默認插槽的相關資料,需要的朋友可以參考下2021-11-11
Vue filter 過濾當前時間 實現(xiàn)實時更新效果
這篇文章主要介紹了Vue filter 過濾當前時間 實現(xiàn)實時更新效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue使用file-saver插件保存各種格式文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue抽出組件并傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認行為立即執(zhí)行）,這些修飾符可以幫助開發(fā)者更靈活地控制事件的處理方式2025-02-02
本篇文章主要介紹了vue語法之拼接字符串的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家介紹了vue3組件庫Shake抖動組件搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本篇文章主要介紹了在vue中通過axios異步使用echarts的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了layui實際項目使用過程中遇到的兼容性問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue前端數(shù)值轉換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開發(fā)中我們經常會遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關于Vue前端數(shù)值轉換為千分位格式并保留兩位小數(shù)的相關資料,需要的朋友可以參考下2024-06-06