同源:
URL由協議耳峦、域名恩静、端口和路徑組成,如果兩個URL的協議蹲坷、域名和端口相同驶乾,則表示他們同源邑飒。
同源策略:
如果非同源,共有三種行為受到限制级乐。
- Cookie疙咸、LocalStorage 和 IndexDB 無法讀取。
- DOM 無法獲得唇牧。
- AJAX 請求不能發(fā)送罕扎。
在此詳細記錄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"}');
可以動態(tài)添加script標簽實現JSONP請求
2.Proxy
將請求脫離瀏覽器,從而避免跨域問題
使用本方法跨域步驟如下:
>1. 把訪問其它域的請求替換為本域的請求
- 本域的請求是服務器端的動態(tài)腳本負責轉發(fā)實際的請求 各種服務器的Reverse Proxy功能都可以非常方便的實現請求的轉發(fā)丐重,如Apache httpd + mod_proxy腔召。
**Eg.**
為了通過Ajax從[http://localhost:8080]訪問[http://localhost:8081/api],可以將請求發(fā)往[http://localhost:8080/api]扮惦。
然后利用Apache Web服務器的Reverse Proxy功能做如下配置:
ProxyPass /api [http://localhost:8081/api](http://localhost:8081/api)
3.WebSocket
通過ws協議來規(guī)避同源策略臀蛛,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】跨域資源分享
可以發(fā)送任何形式的請求,比JSONP強大豫领,但正因為此JSONP的支持比CORS更廣
詳細規(guī)避同源問題如下:(據反饋抡柿,有些可能有點小問題)
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html