同源策略和跨域

同源策略是什么？

如果两个 URL 的协议、端口和域名都完全一致的话，则这两个 URL 是同源的。

http://www.baidu.com/s
http://www.baidu.com:80/ssdasdsadad

同源策略怎么做？

只要在浏览器里打开页面，就默认遵守同源策略。

优点

保证用户的隐私安全和数据安全。

缺点

很多时候，前端需要访问另一个域名的后端接口，会被浏览器阻止其获取响应。 比如甲站点通过 AJAX 访问乙站点的 /money 查询余额接口，请求会发出，但是响应会被浏览器屏蔽。

怎么解决缺点

使用跨域手段。

1. JSONP

   a. 甲站点利用 script 标签可以跨域的特性，向乙站点发送 get 请求。

   b. 乙站点后端改造 JS 文件的内容，将数据传进回调函数。

   c. 甲站点通过回调函数拿到乙站点的数据。

2. CORS

   a. 对于简单请求，乙站点在响应头里添加 Access-Control-Allow-Origin: http://甲站点 即可。

   b. 对于复杂请求，如 PATCH，乙站点需要：

    i. 响应 OPTIONS 请求，在响应中添加如下的响应头
   

     Access-Control-Allow-Origin: https://甲站点
     Access-Control-Allow-Methods: POST, GET, OPTIONS, PATCH
     Access-Control-Allow-Headers: Content-Type

    ii. 响应 POST 请求，在响应中添加 `Access-Control-Allow-Origin` 头。
   

   c. 如果需要附带身份信息，JS 中需要在 AJAX 里设置 xhr.withCredentials = true 。

3. Nginx 代理 / Node.js 代理

   a. 前端 ⇒ 后端 ⇒ 另一个域名的后端

详情参考

MDN CORS 文档