跨域的处理

同源策略：

要求域名、协议、端口相同

JSONP

是一种跨域请求方式，

Nginx

Nginx 是一款轻量级的 HTTP 服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有良好的 IO 性能，时常用于服务端的反向代理和负载均衡。

跨域

跨域是由于浏览器的同源策略限制了不同域直接的 ajax 请求，而同源策略是浏览器最基础的安全功能，同源策略的限制主要有三个方面，ajax 不能跨域读取，dom 不能跨域操作，Cookie、 LocalStorage、 IndexDB 无法读取

针对于 cookie

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享，但是两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置 documen.domain 共享 cookie

针对于 ajax

端口、 协议、 域名 三者其中一个不相同，那么就无法跨域请求

解决 ajax 的跨域我们可以从同源策略的限制上入手
1.Ajax 无法跨域请求，而请求只是限制了 ajax，并没有限制其他的请求
2.同源策略是浏览器的限制

利用其他资源可以解决跨域，常见的方案就是 jsonp， jsonp 就是利用js 请求模拟 ajax 请求，从而突破同源策略的限制，但是需要后端配合返回值为 js 的语法，常见的就是后端返回一个 js 函数，并且将数据作为参数传递，而返回的函数名称是前端通过 callback 字段传递到后端的，但是 jsonp 也有自己的问题，无法判断接口状态码，无法进行 post 请求，其原理就是动态生成一个 js 函数，动态生成 script 标签并且设置 src 属性为请求的接口地址，将函数名称作为参数发送到后端，后端返回函数，当 js 加载成功自动执行，在函数内部我们做参数的解析。

同源策略只是浏览器的限制，我们可以利用服务器添加代理来突破同源策略的限制，常见的代理添加方式是 webpack-dev-server 里可以添加 proxy 添加正向代理设置，解决我们开发环境中遇到的跨域问题，如果正式环境依然存在跨域问题我们可以利用 nginx 添加反向代理设置。

再就是 w3c 新增了跨域资源共享的方法，允许后端通过Access-Control-Allow-Origin 设置允许请求的域名，前端不需要做任何修改，cros 方式一般常用于小程序项目开发时接口的设置，因为小程序是运行在客户手机上的，本身不存在跨域问题，并且无法添加代理，也不能使用 jsonp，只能使用 cros 的方式