JS中同源策略以及跨域

同源：
URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
同源策略：
如果非同源，共有三种行为受到限制。

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 无法获得。
3. AJAX 请求不能发送。

在此详细记录AJAX的跨域技术：

1.JSONP 【只支持GET请求】
JSONP是利用<script>标签的跨域能力实现跨域数据的访问

[http://localhost:8080/test.html]
<script src="http://localhost:8081/test_data.js">
  function test_handler(data) {
    console.log(data);
  }
</script>

服务器端的Javascript脚本[http://localhost:8081/test_data.js]：
test_handler('{"data": "something"}');

可以动态添加script标签实现JSONP请求

2.Proxy
将请求脱离浏览器，从而避免跨域问题
使用本方法跨域步骤如下：
>1. 把访问其它域的请求替换为本域的请求

2. 本域的请求是服务器端的动态脚本负责转发实际的请求 各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发，如Apache httpd + mod_proxy。

**Eg.**
为了通过Ajax从[http://localhost:8080]访问[http://localhost:8081/api]，可以将请求发往[http://localhost:8080/api]。
然后利用Apache Web服务器的Reverse Proxy功能做如下配置：
    ProxyPass /api [http://localhost:8081/api](http://localhost:8081/api)

3.WebSocket
通过ws协议来规避同源策略，ws://和wss://，该协议不实行同源策略，只要服务器支持即可通信

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

由于拥有Origin字段，可以根据此判断是否许可本次通信

4.CORS【Cross-Origin Resource Sharing】跨域资源分享
可以发送任何形式的请求，比JSONP强大，但正因为此JSONP的支持比CORS更广

http://www.ruanyifeng.com/blog/2016/04/cors.html

---

详细规避同源问题如下：（据反馈，有些可能有点小问题）

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html