跨域是瀏覽器行為，不是服務器行為，是瀏覽器將請求阻止，
說在前面
前端開發程序中會遇到訪問請求跨域的問題，比如呼叫如下方法訪問疫情分布的公共介面，就會出現跨域的問題，
export function getDiseaseInfo() {
return axios({
url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
method: 'get'
})
}
解決思路
開頭有說過，跨域是瀏覽器行為，實際上我們發出的請求已經到達服務器了，但是服務器回傳資料時被瀏覽器限制了，所以有一個很直接的解決思路就是不通過瀏覽器，而是通過代理服務器發起網路請求，這樣回傳的內容就不會被攔截了，這是反向代理的典型應用，
本地啟動服務解決跨域
前端專案在本地環境之所以能啟動，是因為本地啟動了一個Node服務器，我們可以讓這臺服務器作為代理服務器去完成請求的發送，
vue-cli本身提供了vue.config.js組態檔來配置服務器的代理，通過配置devServer可以實作這一效果：
module.exports = {
devServer: {
proxy: {
'/disease-api/': {
target: `https://view.inews.qq.com/`, // 將前綴localhost:9528更換成這個
ws: false,
changeOrigin: true,
pathRewrite: {
'/disease-api': '' // 將拼接成的URL去掉設定的/disease-api標識
}
},
}
}
}
然后發起請求時：
export function getDiseaseInfo() {
return axios({
url: '/disease-api/g2/getOnsInfo?name=disease_h5',
method: 'get'
})
}
通過f12查看網路訪問情況：
如上圖所示，在瀏覽器看來訪問的/disease-api，是localhost:9528這個ip和埠的服務,符合同源策略，所以瀏覽器并不會認為這是跨域，
實際上，服務器在攔截到帶有/disease-api/后，會將訪問前綴更換為指定目標【target】，實際時訪問的是 https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5，
部署后的服務解決跨域
前端專案部署后，因為沒有了本地的Node環境，可以通過nginx服務器來完成反向代理，
特別注意，此種情況需要服務器自身能夠訪問https://view.inews.qq.com/disease-api/g2/getOnsInfo?name=disease_h5，使用前請確認，
nginx服務器的路徑代理配置可以參考以下兩種情況：
location /disease-api/ {
proxy_pass https://view.inews.qq.com/;
}
這樣會代理到：https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
location /disease-api/ {
proxy_pass https://view.inews.qq.com;
}
這樣會代理到：https://view.inews.qq.com/disease-api/g2/getOnsInfo?name=disease_h5
以目前我們想要實作的效果來說，選第一種就可以了，
說到最后
以上，歡迎溝通討論~
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/321164.html
標籤：其他
上一篇：阿里云ecs安裝nginx
下一篇：Linux中DHCP服務原理