vue解决前端跨域到nginx配置项小记

跨域是作为每一个前端er必须要去面对的事情，如何去理解跨域呢？

以上任何一点不同，就会产生跨域。那么解决跨域常用方法有以下几种（欢迎补充）：

1. Jsonp来处理跨域

虽然Jquery的ajax也有jsonp方法，但是jsonp本质上与ajax是有区别的。ajax的核心是通过XMLHttpRequest获取非本页的内容，而jsonp是通过script标签的机制来调用服务器提供的js脚本，然后获取callback参数。

  2. CORS

CORS：(Cross Origin Resource Share) 跨域资源共享，可以让服务器端的同学帮忙在header添加('Access-Control-Allow-Origin: *');

3. nodejs 中间件代理跨域

先看一下代码：

已vue为实例，通过config目录下的index.js设置proxyTable来解决前端跨域，解决跨域原理就是通过中间层设置代理，在请求以及发送以前加入中间层，将不同的域名转换成相同的域名，从而解决跨域。简单来说就是

   你本地通过node开启localhost:8080服务，而在你使用中间层做代理后就变成了192.168.0.88:xxxx，
再去请求服务器。
    服务器端收到请求后使用的就是刚才的192.168.0.88:xxxx域名,当服务器返回响应数据也是先到中间代理层，
代理层再把IP转成你本地node开启的端口localhost:8080复制代码

这样一来就同源达到同源策略:在相同域名下访问接口啦！

4. nginx代理跨域

通过nginx设置反向代理,按照惯例直接上代码：

实现原理：通过nginx配置一个代理服务器，反向代理访问接口地址，并且可以顺便修改cookie中的信息，方便当前域cookie写入，从而实现跨域。上图中只需要两个步骤来设置，

第一步:用正则来替换你本地使用proxyTable的参数，我这边用的api。第二步:直接设置你需要代理的接口地址。

那么到目前为止，在日常项目当中经常解决跨域的办法就在这里了，欢迎大家补充，共同交流！