has been blocked by CORS policy: No Access-Control-Allow-Origin

遇見這個就是遇見跨域問題了,我的是nodejs服務端所以,在app.js裏添加

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    next();
});

這個保存重啓一下服務器就好了

跨域

 什麼是跨域?

瀏覽器的同源策略限制了從同一個源加載的資源 (文檔或腳本等) 如何與來自另一個源的資源進行交互,它是一個用於隔離潛在惡意文件的重要安全機制。

同源策略控制了不同源之間的交互,當瀏覽器從一個源的網頁去請求另一個源的資源時,即瀏覽器在做跨服務的資源訪問時,就會出現跨域問題.

舉個例子

http://company.com/position/other.html     成功

http://company.com/judge/index.html        成功

https://company.com/position/other.html    失敗  原因:不同協議  https和http屬於跨域

http://asdasda.com/position/other.html     失敗  原因:不同域名(子域名不同也算跨域)

域名和實際ip地址屬於跨域,如:localhost和127.0.0.1雖然都指向本機,但也屬於跨域

 如何處理:

我這裏選擇是處理header(其他方法自行百度)

比如A源想訪問B源的資源,那麼通過修改B源中response 中 header的  "Access-Control-Allow-Origin"字段來允許A源的跨域請求。

瀏覽器檢測到"Access-Control-Allow-Origin"字段,則會根據結果對響應做解析.

Access-Control-Allow-Origin : *         表示源B接收來自其它任何源的跨域請求

Access-Control-Allow-Origin : 源A          表示源B只接收來自源A的跨域請求

CORS的預請求

 

在跨域時,並不是所用的方法都會被允許,對於非默認允許方法,需要經過近一步驗證後纔會得到跨域允許,這就涉及到CORS的預請求.

在跨域時默認允許的Method:

GET
HEAD
POST


在跨域時默認允許的Content-Type:

text/plain
multipart/form-data
application/x-www-form-urlencoded


跨域時其它的限制:

 

請求頭的限制
XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器
請求中沒有使用ReadableStream對象  


CORS預請求就是瀏覽器在在發生請求時,會預先自動發出一個OPTIONS請求來檢測本次請求中涉及到的一些內容(如Method, Content-Type 等)是否被服務器接受。一個OPTIONS請求一般會攜帶下面兩個與跨域相關相關的頭:

Access-Control-Request-Method :  本次預請求的請求方法。
Access-Control-Request-Headers:本次請求所攜帶的自定義首部字段

服務端收到該預請求後,會返回相關的響應頭。主要會包括下面幾個:

Access-Control-Allow-Origin:  服務器允許的跨域請求源
Access-Control-Allow-Methods:  服務器允許的請求方法
Access-Control-Allow-Headers :  服務器允許的自定義的請求首部字段

只有通過預請求,瀏覽器纔會發生正式的數據請求。相對比正常的就是多了一個預請求,且預請求通過纔會真正請求。預檢請求只是一個檢查的過程,它不會攜帶任何請求的參數;預檢通過後的請求才會真正的攜帶請求參數與服務器進行數據通信。

若服務器對預請求沒有任何響應,那麼瀏覽器不知道服務器是否支持跨域訪問,就而不會發送後續的實際請求;或者服務器不支持當前的origin跨域訪問也不會發送後續請求。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章