遇見這個就是遇見跨域問題了,我的是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跨域訪問也不會發送後續請求。