简单谈谈同源策略和跨域问题

同源策略是什么？

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

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

同源策略怎么做？

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

优点

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

缺点

很多时候，前端需要访问另一个域名的后端接口，会被浏览器阻止其获取响应。

比如甲站点通过 AJAX 访问乙站点的 /money 查询余额接口，请求会发出，但是响应会被浏览器屏蔽。

怎么解决缺点

使用跨域手段。

1. JSONP

   1. 甲站点利用 script 标签可以跨域的特性，向乙站点发送 get 请求。
   2. 乙站点后端改造 JS 文件的内容，将数据传进回调函数。
   3. 甲站点通过回调函数拿到乙站点的数据。

2. CORS

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

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

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

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

      2. 响应 POST 请求，在响应中添加 Access-Control-Allow-Origin 头。
   3. 如果需要附带身份信息，JS 中需要在 AJAX 里设置 xhr.withCredentials = true 。

3. Nginx 代理 / Node.js 代理

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

详情参考 MDN CORS 文档。

总结 为了方便自己后期查看而总结,大佬就不用看啦. 哈哈哈勿喷.