跨域的解决方案（反向代理）

反向代理

在前后端分离开发的场景，前端有个服务器（提供页面）。后端也有个服务器（提供接口）。

1、开发环境，前端要连后端的接口，就会出现跨域问题。

2、生产（发布）环境：

​ 1）、如果还是前后端分离（在不同的服务器上）。依然有跨域问题（nginx）

​ 2）、如果前后端代码在一起（一个服务器），不存在跨域问题

跨域的解决方案

1）、jsonp

2）、CORS（后端配合） ：cross origin resource sharing 后端解决跨域的方案
php 中，这么写：header(“Access-Control-Allow-Origin:*”);

3）、反向代理（前端webpack的devServer）

一、为什么要叫反向代理

  正向代理隐藏真实客户端，反向代理隐藏真实服务端。

二、反向代理解决的问题

就是跨域，在前后端联调的情况下，前端有服务器，后端也有服务器，那么联调时，就存在跨域问题

三、反向代理的原理

通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致跨域问题。

四、vue-cli2.x里反向代理使用步骤和配置

1、安装axios与http-proxy-middleware（vue-cli中默认已经安装）

2、在config/index.js中的dev中配置

3、在dev配置对象中找到proxyTable:{  }

4、添加如下配置（把对“/api”开头的访问转换成对 http://www.itzhihu.cn的访问）:

​      proxyTable: {
​     	 	'/api': {  // 要替换的地址，在本地新建一个/api的访问路径 。
​     				   target: 'http://www.itzhihu.cn',  // 替换成啥，要访问的接口域名 。
​    				    changeOrigin: true,  // 是否跨域 
  				      pathRewrite: {
​        			 	 '^/api': ''    //重写接口，去掉/api， 在代理过程中是否替换掉/api/路径 
​     			   }
  		    }
​    }

这样以后访问以“/api”开头的地址都会转向http://www.itzhihu.cn的访问

五、vue-cli3+配置反向代理

1.打开（新建）项目根/vue.config.js

​ 写上如下代码：

module.exports = {
  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
       		 target: 'http://localhost:3001',
       		 changeOrigin: true, //创建虚拟服务器 
          	pathRewrite: {
                '^/api': ''    //重写接口，去掉/api， 在代理过程中是否替换掉/api/路径 
     		}
      	}
      }
   }
}

> 注意：
>
> 1、修改完 vue.config.js文件后，必须要重启服务器
>
> 2、如果你复制了笔记上的代码，而且出现问题，那么，删掉看不见的中文空格和注释。
>