同源策略和跨域
阿新 • • 發佈：2021-01-03
什麼是瀏覽器的同源策略？
ajax請求時，瀏覽器要求當前網頁（以及請求的資源）和server必須同緣以保證安全，即ajax只能訪問自己的資源
同源： ajax請求的url的 協議，域名，埠必須一致
對於一段JavaScript指令碼來說，其“源”與它儲存的地址無關，而取決於指令碼被載入的頁面。比如我們在某個頁面中通過。
<script>標籤引用了來源於不同地方（“http://www.artech.com/”和“http://www.jinnan.me/”）的兩個JavaScript指令碼，它們均與當前頁面同源。
可以跨域的地址：
圖片的地址：直接跨域，可以利用img統計打點，在src的地址頁面中寫上各種需要的引數；
css/js的地址
js的地址
跨域
所有的跨域都需要伺服器端的允許和配合，如github的部分API允許跨域請求。
修改瀏覽器安全設定
JSONP
服務端可以返回HTML/Js格式的以動態拼接的資料。
<script>標籤可以繞過跨域
服務端允許返回資料，拼接<script src='https://example.js?para'>可以藉此獲取資料
原生的jsonp（demo並非真跨域，懶得設定埠）
頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> windows.abc = function(data){ console.log(data); } </script> <script src="jsonp.js?callback=abc"></script> </html>
jsonp.js
abc({x:1, y:2})；
一般用Jquery實現跨域過程：只能是預設的get方法不是post
$.ajax({ url: 'https://cross-origin.com/x-origion.json', dataType: 'jsonp', jsonpCallback: 'callback', // 一般可以取代success success: data=>{ console.log(data); } }); function callback(data){ console.log(data); }
CORS跨域
在服務端設定響應頭http header，使之 Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods等屬性，使之允許ajax請求
還可以通過 iframe+window/location的屬性進行跨域，或者反向代理，暫不研究