浏览器具有同源策略，下面一张图说明
说明图
同源政策规定，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。
网友评论