解决Ajax 跨域的三种方法

浏览器具有同源策略，下面一张图说明

说明图

同源政策规定，AJAX请求只能发给同源的网址，不然会报错。下面介绍三种方法 来解决跨域问题

1.JSONP

JSONP的最大特点就是简单实用，老式浏览器全部支持。

他的基本思想是，网页通过添加一个<script>标签，向服务器请求JSON数据，这种做法不受同源政策限制，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来

上面代码 通过动态添加<script>元素，向服务器发出请求。其中地址中的callback参数，用来指定回调函数的名字，这对于jsonp是必须的，服务器收到这个请求后，会将数据放在回调函数的参数位置返回

此时 就能完成跨域请求。

2.WebSocket

WebSocket是一种通信协议，使用ws://(非加密)和wss://(加密)作为协议前缀，改协议不实行同源策略，只要服务器支持，就可以用过它进行跨源通信。

websocket需要进行服务器的配置，下面操作摘自阮老师文章

3.跨域资源共享（CORS）

（1）CORS需要浏览器和服务器的支持，目前除ie9 及以下都支持。

整个跨域资源共享通信过程，都是浏览器自动完成，前端操作和正常的AJAX写法没有叙别，主要实现的关键是服务器，只要服务器实现了CORS接口，就可以实现跨源通信

（2）跨域资源请求（CORS）分为简单请求和非简单请求

下面是对 CORS的 详细流程

http://www.ruanyifeng.com/blog/2016/04/cors.html（阮老师）

JSOP 和 CORS 对比：

a、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

b、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

c、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。