概念
同源策略是瀏覽器的一種安全策略，所謂同源是指域名、協議（http、https）、埠完全相同，只有同源的地址才可以相互通過AJAX的方式請求，不同源地址之間，默認不能相互發送AJAX請求
同源或者不同源說的是兩個地址之間的關系，不同源地址之間請求我們稱之為跨域請求，
http://www.baidu.com:80和ftp://www.baidu.com:80 不同域，協議不一樣
http://www.baidu.com:80和http://www.xiaomi.com:80 不同域，主機名不一樣
http://www.baidu.com:80和ftp://www.baidu.com:8080 不同域，埠號不一樣
http://www.baidu.com:80/a.html和ftp://www.baidu.com:80/b.js 同域
跨域請求的前因后果
為什么瀏覽器要限制跨域請求，其中最主要的原因就是安全性問題，比如CSRF攻擊，但是，既然不安全，為什么我們又要跨域請求呢？為了服務器便于管理和減輕服務器壓力，公司會把不同的資源放在不同的服務器上，這樣就存在很多子域，這時比如A子域的html資源要去訪問B子域的圖片資源就會出現跨域請求了，（可以注意下京東網站就是個很好的例子）
方法一、JSONP
ajax請求不同域會出現跨域請求，無訪問權限
//報錯CORS header ‘Access-Control-Allow-Origin’ missing $.get("http://locally.uieee.com/categories", {}, function (data, textStatus, jqXHR) { console.log(data) }, );
但平時在HTML頁面寫的<script>、<link>這些標簽的src屬性是不受跨域請求限制的，
var script = document.createElement('script') script.src = 'http://locally.uieee.com/categories'//回傳的是json document.body.appendChild(script)
JSONP的策略就是服務器端可以動態生成JSON檔案，把客戶端需要的資料放到這個檔案中，讓客戶端通過<script>標簽的src屬性來請求這個檔案，這樣，一種解決方案就出來了，
客戶端
在任意位置寫一個html頁面
服務端
在nodejs的express框架里的public寫一個js檔案，靜態資源都放在這里，
雙擊打開.html檔案可看結果
注意
JSONP方式無法發送POST請求，只能通過URL后面帶引數實作，而且想要確定JSONP的請求是否失敗并不容易，大多數實作都是結合超時時間來進行判斷的，
方法二、CORS跨資源共享
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制，
這種方案無需客戶端做出任何變化(客戶端不用改代碼)，只是在被請求的服務端回應的時候添加一個回應頭Access-Control-Allow-Origin，表示這個資源是否允許指定域請求，
服務器端設定
如需允許所有資源都可以訪問您的資源，可以如此設定：
Access-Control-Allow-Origin: *
如需允許https://developer.mozilla.org訪問您的資源，可以設定：
Access-Control-Allow-Origin: https://developer.mozilla.org
Node.js 設定header解決跨域問題
//也可單獨于某個請求中設定相應頭 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); next(); }); //res.header() 是res.set()的別名，為express中的用法 //res.setHeader()為node無express用法
CORS和快取
如果服務器未使用“*”，而是指定了一個域，那么為了向客戶端表明服務器的回傳會根據Origin請求頭而有所不同，必須在Vary回應頭中包含Origin，
Access-Control-Allow-Origin: https://developer.mozilla.org Vary: Origin
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145750.html
標籤：JavaScript
上一篇：30s原始碼刨析系列之函式篇