vue跨域问题，CORS，jsonp，nginx，代理服务器

本文已参与[新人创作礼]活动，一起开启掘金创作之路

为什么会产生跨域 ？？

不满足同源策略：协议+域名+端口

请求发了，服务器数据也响应给浏览器了，但是浏览器拒收给拦截了

No 'Access-control-Allow-Origin' header is present on the resqusted resource

如何解决跨域 ？？

1.CORS

CORS是一个基于HTTP头的机制，该机制允许服务器向浏览器发送除自己以外的其他origin（域名，协议，端口）

需求：其需要浏览器和服务器同时支持，IE不低于10

。。。。。。。。。。。。。。。。。。。。。。。。。

2.jsonp

前后端配合

jsonp 利用script的src特性解决

具体细节：

第一步,动态创建script标签

第二步，script的src的值就是请求地址的url

第三步，携带参数

<script src="http://www.niupi.com?callback=fn"></script>

第四步，定义fn函数

   <script>
   function fn(res){
     //res就是服务器返回的数据
   }
   </script>

第五步，

res.json('fn({code:666,success:大佬牛皮})')

。。。。。。。。。。。。。。。。。。。。。。。。

。。。。。。。。。。。。。。。。。。。。。。。。

注意：

jsonp发送的请求跟ajax有木有关系？

答：木有

jsonp能不能发送pust请求？

答：不能，只能get

。。。。。。。。。。

3.nginx

后端

根据端口用nginx部署一个站点

搭建一个vue项目

绑定域名

添加http支持

。。。。。。。。

4.代理服务器

前端

当我们提到跨域问题的时候，身为前端的我们第一时间想到的就是代理服务器

在前端服务器和后端端口服务之间架设一个中间代理服务器，他的地址保持和前端服务一致

1.代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题可以直接发送请求

2.代理服务器和后端服务之间一路与并不经过浏览器没有同源策略的限制，可以直接发送请求

如此这般，我们就可以通过中间这个服务器做接口转发，在开发环境下解决跨域问题，看起来很复杂，多此一举，但其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下就可。

在vue.config.js的devServer中配置

    proxy: {
      'xxx': {
        target: '代理服务器地址'
      }
    }

/xxx只要请求地址中带有该xxx的就会进入代理服务器