同源策略与跨域方法

2016-12-01

摘要：浏览器同源策略与跨域方法

同源策略

（同源策略Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源是指，域名，协议，端口相同。
一个域名地址的组成：
http:// www . abc.com : 8080 / scripts/jquery.js
依次是：协议子域名主域名端口号请求资源地址
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源就是“跨域”
可以跨域的三个标签：

1
2
3

<img src="xxx" alt="xxx">
<link rel="stylesheet" href="xxx">
<script src="xxx"></script>

跨域并不是 http 请求发送不出去，请求可以发出去，服务端也能接受并正常返回结果，只是结果被浏览器拦截了。在跨域的情况下，不论请求是否成功，控制台都会显示跨域问题。

跨域方法

1、JSONP

简单的 GET 请求可以使用 JSONP，具体使用查看JSON与JSONP

2、CORS

CORS 即允许当前域的资源被其他域的脚本请求访问的机制，服务端设置Access-Control-Allow-Origin: * 或者Access-Control-Allow-Origin: 'http://www.yourwebsite.com'就可以开启。
使用 CORS 发送请求时，会出现两种情况：
一、简单请求
符合以下要求：
1、请求方法：GET、POST、HEAD
2、没有自定义的请求头，且仅有这些请求头字段：Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width
3、POST 的 Content-Type 为 text/plain、 multipart/form-data、 application/x-www-form-urlencoded 其中之一
4、不能为 XMLHttpRequestUpdate 注册监听器
5、请求中没有使用 readableStream 对象
二、复杂请求
除了简单请求，其他都属于复杂请求。复杂请求会先发送一次类型为 OPTIONS 的预检请求，从而获知服务端是否允许该跨域请求、是否需要携带身份凭证。

反向代理

同源策略是浏览器的标准，而如果服务端向服务端请求就无需遵循同源策略。浏览器的请求先发给同域的代理服务器，代理服务器将请求转发给服务器，代理服务器收到服务器的响应后再转发给浏览器。通常使用 node 或者 nginx 提供代理服务

postMessage

前面都是解决浏览器与服务端跨域通信的方法，而 postMessage 主要用于浏览器中不同域页面之间跨域通信