跨域是浏览器行为,不是服务器行为,是浏览器将请求阻止。
说在前面
前端开发过程中会遇到访问请求跨域的问题,比如调用如下方法访问疫情分布的公共接口,就会出现跨域的问题。
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
以目前我们想要实现的效果来说,选第一种就可以了。
说到最后
以上,欢迎沟通讨论~