Vue專案在開發環境跨域和生成環境部署跨域問題解決

2021-09-06 09:00:50 字數 1351 閱讀 2645

1.專案使用的是axios請求網路,將baseurl修改為/api (這裡是使用webpack提供的**功能將/api**成目標介面host)

axios.defaults.baseurl = '/api';
2.進入config/index.js裡,在dev下增加proxytable配置,可以匹配到/api,將其**成目標介面host

dev: }}

//}

此時已經解決了dev下的跨域問題

3.進入package.json,在dev欄位下增加 " --host 0.0.0.0 ",這樣就可以真機通過ip位址訪問專案,進行除錯

"scripts":
1.同樣將axios的baseurl修改為 /api, (生產環境下是使用nginx反向**,將/api **成目標介面host)

此時已經可以通過tomcat訪問專案了,但是banner顯示不出來,由於沒有解決跨域問題

4.進入nginx/conf目錄,新建資料夾myconfig,以及double-c.conf檔案

5.編輯double-c.conf配置檔案,配置反向**

server 

location /api

}

6.進入nginx/conf/nginx.conf配置檔案,匯入上面的double-c.conf配置

http
7.此時已可以通過nginx**訪問tomcat下的專案,並且解決了跨域問題(192.168.25.128就是配置裡的localhost)

Vue專案中的跨域問題(開發環境 生產環境)

剛工作兩個月,公司專案的 還沒接觸明白,今天偶然看到了前端專案中vue.config.js對於後台介面的配置 devserver proxy after require mock mock server.js 有兩個地方用到,分別在生產環境和開發環境中 但是我還看到nginx伺服器的配置也有跨域相關...

vue 解決跨域問題(開發環境)

同源 網域名稱,協議,埠均相同 不同源就是跨域,比如你的前端為localhost 9528,後端為localhost 8080,此時前端去訪問後端介面就會產生跨域問題,因為埠不同。跨域問題前後端都可以解決,這裡僅提供vue的前端跨域解決方案 前端vue.config.js配置如下,然後保證在你訪問後...

vue專案跨域問題

cors 這個方案缺點 是 ie6 7 相容不好 倒是不見得要相容 需要b 在響應中加頭 postmessage 缺點也是 ie6 7 相容不好 倒是不見得要相容 需要修改b 的 iframe window.name 傳值得方式很巧妙,相容性也很好。但是也是需要你能修改b 服務端主動請求b 相容性好...