前端跨域問題解決（小白最適用）
首先什么是跨域：下面就是非官方，大家通常喜歡說的就是瀏覽器不能執行其他網站的腳本；類似于我要執行其他網站的介面，就是說它是由瀏覽器的同源策略造成的，是瀏覽器加的安全機制，
同源策略：不懂得就百度，域名，協議，埠相同；那么跨域是啥：來來來，敲黑板----->域名，協議，埠任一一個不同都存在跨域，包括協議（就是http/https），
下面教你如何玩轉跨域，首先找到config.js檔案夾，在代理服務處加上你要呼叫的服務；
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.1.666:8080`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "/"
}
},
//VUE_APP_BASE_API_wlw----》這是你的url路徑
[process.env.VUE_APP_BASE_API_wlw]: {
target: "http://xjz.202166.com",//這是在頁面中要訪問的服務，
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API_wlw]: "/"
}
},
},
下面VUE_APP_BASE_API_wlw給他定義一個名稱，wlwapi是你本地用的
# 開發環境配置
ENV = 'development'
# 路由懶加載
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# url根路徑
VUE_APP_BASE_API_wlw = "/wlwapi"
然后下一步新建一個request.js檔案，然后創建一個新實體，
然后在呼叫JS介面檔案引入上面的請求JS檔案，
import requestwlw from "@/utils/requestwlw";
// 物聯網介面
export function wlwInfo(query) {
return requestwlw({
url: `/departww/queryDevicexjzsix`,
method: "post",
data: query
});
}
使用時就可以把介面的方法引入到你呼叫的頁面，使用就可以了，
如果部署到線上的話，就往下看，
注意：專案打包時，config.js里面的檔案不會被打包，
剛才我們在前面用到了根路徑（wlwapi這就是個前綴），現在就是再寫一個線上使用的名字（wlwWorkP）
# 生產環境配置
ENV = 'production'
# url根路徑
VUE_APP_BASE_API_wlw = "/wlwWorkP"
下面打包好以后，部署到相關服務上面，在你部署專案的外部檔案有一個conf檔案夾，在檔案夾里找到ngix檔案，找到你的配置
server {
listen 80;
location / {
root html;//這是專案入口夾，就是上面用紅線標注的，
index index.html index.htm;// 這是打包后的檔案
}
}
location /wlwWorkP/ {
proxy_pass http://xjz.202166.com/;#代理所有wlwWorlp開頭的請求
proxy_connect_timeout 60;
proxy_read_timeout 60;
proxy_send_timeout 60;
}
然后保存檔案，打開命令窗，Nigx -s reload,就是重啟一下就可以了，
然后打開線上地址，找到跨域的介面處，看一下請求地址，
如有不對之處，請大家指正，謝謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382899.html
標籤：其他
上一篇：npm包管理工具
下一篇：為什么人們不喜歡 PHP？