[问题探讨]使用反向代理解决跨域请求

需求：使用反向代理解决跨域请求

一，跨域问题产生的原因

浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，而引入了同源策略，对于以下非同源情况，都会禁止ajax请求：

1. 域名/IP不一致；
2. 端口号不一致；
3. 协议不同；
4. 二级域名不同。

二，使用反向代理解决跨域

目前比较通用的方法是CORS和反向代理，CORS对于前端小伙伴来说是一般无感的(某些特殊业务需求中使用低版本浏览器可能不支持CORS)，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。简言之，CORS依赖后端，这确实有点不爽，今天我们来阐述通过反向代理由前端小伙伴们自己来解决跨域问题。

1，原理

通过使用web服务器，对其他服务器资源进行反向代理，对请求资源进行中转，来/" 欺骗 "/浏览器，使浏览器感觉不到资源来自于其他服务器，以达到解决跨域的效果。

2，开发环境配置(vue为例)

// 在config  index.js里面配置如下代理
// 你的服务器地址+端口号比如 http://90.0.19.244:8068
  const API_SERVER = "http://90.0.19.244:8068"
  dev: {
    proxyTable: {
      '/api/**': {
        target: API_SERVER,
        changeOrigin: true,
        pathRewrite: { "^/api": "" }
      }
    },

3，测试/生产环境配置(nginx为例)

// 在nginx服务器的配置文件(.conf)的server里面增加配置
    location /api {
        rewrite ^.+api/?(.*)$ /$1 break;
        proxy_pass http://90.0.19.244:8068;
    }

关于配置里面/api的说明：作为一种保护机制，我们可以在请求url上增加base_url,以避免接口被随意使用，如果不考虑这种机制，上面的/api可以直接改为/，并同时需要去掉pathRewrite/rewrite相关配置。