前端项目配置代理解决跨域问题

跨域是浏览器行为，不是服务器行为，是浏览器将请求阻止。

说在前面

前端开发过程中会遇到访问请求跨域的问题，比如调用如下方法访问疫情分布的公共接口，就会出现跨域的问题。

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

以目前我们想要实现的效果来说，选第一种就可以了。

说到最后

以上，欢迎沟通讨论~