跨域
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item
同源策略
所谓同源，指协议、域名、端口号相同。
浏览器处于安全考虑，只允许本域名下的接口交互，不同域名下的请求，就会出现跨域。
为什么限制跨域访问
防范XSS攻击，如果不限制跨域访问，你先登录支付宝，浏览器就会保留你的登录状态，避免你每次访问支付宝的页面都去输入用户名和密码。然后你又去访问另一个网站。如果这个网站有恶意代码的话，就会利用浏览器里保留的支付宝的登录状态，去访问支付宝的网站，获取你的信息。
跨域限制与不限制
- Cookie , LocalStorage ,IndexedDB等存储性内容。
- DOM节点。
- AJAX请求发送后,非同源会被浏览器拦截。
请求跨域了,那么到底发出去没有? 跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了 允许跨域加载资源：
<img src=XXX>
<link href=XXX>
<script src=XXX>
解决方案
JSONP
原理：利用script标签没有跨域限制的特点。
优点：兼容性好。
缺点：需要后端配合，只能发送get请求，容易遭受XSS攻击。
实现流程：将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回。
CORS（跨域资源共享）
原理
服务器设置Access-Control-Allow-Origin打开CORS。该属性表示哪些域名可以访问资源。
副作用
发送请求会出现两种情况，分别为简单请求和复杂请求。
简单请求: 同时满足以下两个条件,就属于简单请求
- 使用下列方法之一：
- GET
- POST
- HEAD
- Content-Type的值只限于下列三者之一：
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器;
复杂请求 : 不符合条件的请求为复杂请求。在复杂请求正式通信前，会增加一次HTTP查询，成为预检请求，为option方法，通过该请求判断服务器是否允许跨域请求。
简单请求和非简单请求的区别
PostMessage
利用HTML5的API，postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
webSocket
WebSocket不受跨域限制。
对应的库:socket.io,封装了websocket接口，也对不支持webSocket的浏览器提供了向下兼容。
服务器转发
- 利用nginx 反向代理
- 代理服务器
例如:开发环境webpack的proxy
iframe
- window.name
- location.hash
- document.domain
