根据浏览器制定的同源策略，不是同源情况下也就是不同端口、不同域名、不同协议的数据交互会产生跨域
该图片摘录自：juejin.cn/post/696174…
因为跨域问题导致的限制问题：
1、因为Cookie、LocalStorage、SessionStorage、IndexDB都是保存到浏览器端的，而且是同源的，所以这些都不能访问到
2、无法获取资源（CSS、JS、HTML中的DOM）
3、最主要还是无法进行数据交互Ajax
但是有三种标签可以进行跨域操作
script、a、img
解决跨域的方法
1、CORS
跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。
原理：
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信
CORS要求浏览器(>IE10)和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。
优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。
2 JSONP
利用
**JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）
**
**JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性。
**
<script src="http://zengfengzhou.cn/hospital/test?callback=jsoncallback"></script>
function jsoncallback() {}
3、Nginx反向代理
server {
listen 8080; #监听端口号
server_name localhost;#域名地址
root html;
location / {
#请求http://localhost:8080，将该请求转发到域名一
proxy_pass http://域名一;
}
#请求http://localhost:8080/api，将该请求转发到域名二，则保证请求在同一个域，解决跨域问题
location /api {
proxy_pass http://域名二/api;
}
}
4、websocket
Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
5、postMessage
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
作者：强哥科技兴
链接：www.jianshu.com/p/383c3f3d2…
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
