ajax同源
- 協(xié)議相同
- 域名相同
- 端口相同
CORS cross-origin resource sharing()
是一個w3c的標準
允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
CORS需要瀏覽器和服務(wù)器同時支持
目前,所有瀏覽器都支持該功能
實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口,就可以跨源通信。
簡單請求(同時滿足下面兩種條件):
- get或者post
- Content-Type的值只能為下面三種:application/x-www-form-urlencoded、multipart/form-data、text/plain
瀏覽器發(fā)現(xiàn)這次跨源AJAX請求是簡單請求,就自動在頭信息之中,添加一個Origin字段
,用于請求來自哪個源(協(xié)議 + 域名 + 端口)
例如:Origin: http://api.bob.com
如果源不在許可范圍內(nèi),服務(wù)器回應(yīng)的頭信息沒有包含Access-Control-Allow-Origin字段,瀏覽器發(fā)現(xiàn)后會拋出錯誤,但是狀態(tài)碼依舊可能是200
如果源在許可范圍內(nèi),服務(wù)器返回的響應(yīng),會多出幾個頭信息字段,這里主要說一下必須的那個字段
- Access-Control-Allow-Origin
該字段是必須的。它的值要么是請求時Origin字段的值,要么是一個*,表示接受任意域名的請求。
非簡單請求
比如請求方法是PUT或DELETE,或者Content-Type字段的類型是application/json。
非簡單請求的CORS請求,會在正式通信之前,增加一次HTTP查詢請求,稱為"預(yù)檢"請求(preflight)。
預(yù)檢成功,響應(yīng)頭會帶下面幾個
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000 // 預(yù)檢成功后的有效時間 毫秒
具體解決
node express
var app = express();
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); // 這里設(shè)置請求服務(wù)器的ip
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
另外個有一個別人寫好的github cors
感覺幾行代碼可以解決問題就不需要用工具了。