微服务项目学习之用proxytable解决跨域问题

什么是跨域

首先说明下什么是域，域有三个要素，端口，协议，域名。这三个元素有任何一个不同时，就会出现不同的域。当你从一个域去访问另外一个域的数据时，这就是跨域。这个时候，如果是通过浏览器进行访问，同源策略将会限制你的访问。
同源策略的限制并不是阻拦了你对某个服务器数据的访问，而是你能够访问到数据，但是服务器返回的Response被浏览器给拦截了。

什么是同源策略

同源策略，简称SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。注意，三要素，即端口，协议，域名必须完全一样才可视作同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

如何解决跨域问题

我们知道跨域问题其实就是浏览器拦截了服务器的Response，如果我们通过服务器与服务器之间的访问，也就是说可以通过服务器代理来解决跨域问题。这里我使用了proxyTable来进行服务器代理。

proxyTable是什么

proxytable是vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-middleware github地址 有兴趣的小伙伴们可以研究一下。

proxyTable的使用

首先找到根目录下的config文件夹，再找到里面的index.js文件，打开它，在dev里面配置如下属性

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',//目标接口域名
        pathRewrite: {
          '^/api': '' //这行代码的作用是在实际请求中将‘/api’变为空
        }
      }
   }

举个例子，原先的域名是http://localhost:8888，配置上面的属性后，proxyTable就会将8888端口的请求转发给8080端口，实现了跨域。