同源策略和跨域

同源策略

两个 URL 具有相同的协议，域名和端口，则称它们是“同源”的。
以下的几个 URL 都是同源的：

• http://site.com
• http://site.com:80/
• http://site.com/my/page.html

(http的默认端口是 80， https 的默认端口是 443)

但是下面这几个不是：

• http://**www.**site.com（另一个域：www. 影响）
• http://**site.org**（另一个域：.org 影响）
• https://site.com（另一个协议：https）
• http://site.com:**8080**（另一个端口：8080）

请求不同源的数据即为跨域, 实现跨域的方式有 JSONP 和 CORS

JSONP

下面三个标签可无视同源策略

<img src="" />
<link href="" />
<script src=""><script>

JSONP利用script标签可以无视同源策略的特性，在src中以参数形式将前端写好的回调函数传给后台，后台将数据传给回调函数，浏览器收到请求的JS文件后就会立即执行，从而获得需要的数据

JSONP的缺点：

• 只能发送 GET 请求
• 请求过程无法终止，弱网络条件下容易请求超时
• 拿不到状态码，无法捕获异常

CORS

CORS是跨源资源共享（Cross-Origin Resource Sharing）
对于简单请求，后台在响应头里添加 Access-Control-Allow-Origin: http://站点 即可。

对于复杂请求，如 PATCH，后台需要：

• 响应 OPTIONS 请求，在响应中添加如下的响应头
  • Access-Control-Allow-Origin: https://站点
  • Access-Control-Allow-Methods: POST, GET, OPTIONS, PATCH
  • Access-Control-Allow-Headers: Content-Type
• 响应 POST 请求，在响应中添加 Access-Control-Allow-Origin 头。
• 如果需要附带身份信息，JS 中需要在 AJAX 里设置 xhr.withCredentials = true 。

参考文章