Vue專案跨域的解決辦法

2021-10-07 09:21:54 字數 1157 閱讀 2072

一般我們的前端vue專案中都會涉及到跨域的問題，在專案中訪問web網域名稱獲取資料時無法正常獲取，瀏覽器控制台會類似出現

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

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

dev: }}


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

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

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

axios.defaults.baseurl = '/api';
進入config/index.js裡,在build下修改專案路徑,將assetspublicpath欄位的 '/' 修改為 '/your_project_name' (名稱和專案名稱目錄一致)

build:
編輯your_project_name.conf配置檔案,配置反向**.

server 


location /api 


}
接著進入nginx/conf/nginx.conf配置檔案,匯入上面的your_project_name.conf配置.

http
此時已可以通過nginx**訪問tomcat下的專案,並且解決了跨域問題.

vue中跨域解決辦法

專案在上線之後，前後端的 放在同乙個伺服器下面，就不存在跨域的問題。然而在前後端分離的開發中，跨域在所難免。在以前，存在跨域的時候一般都叫後台小夥伴設定，但是vue中提供了一種方法，在前端也可以設定解決跨域的問題。下面給大家介紹一下 比如我們服務端的位址為http localhost 3000 而我...

跨域解決辦法

解決跨域 本文通過設定access control allow origin來實現跨域。例如 客戶端的網域名稱是client.runoob.com，而請求的網域名稱是server.runoob.com。如果直接使用ajax訪問，會有以下錯誤 no access control allow origi...

跨域解決辦法

什麼是跨域 協議 主網域名稱 子網域名稱 埠有乙個不相同即跨域。如 在www.test.com 請求 www.abc.com下的介面 主網域名稱不同 在www.test.com 請求 m.test.com下的介面 主網域名稱不同 在www.test.com 請求 www.test.com 81下的介...