HTTP之跨域預請求options

今天分享一個關於預請求的，咱們先寫一個接口，新建server.js，代碼：

const http = require('http');

http.createServer(function (request, response) {

response.writeHead(200, {

'Access-Control-Allow-Origin': '*'
複製代碼

});

response.end('welcome to options');

}).listen(3000);

console.log('listen port 3000');

而後node server.js,打印出listen port 300表示啓動成功，接着寫一個Ajax請求：

$.ajax({

url: 'http://192.168.164.16:3000/',

method: 'get',

success: function (res) {

console.log(res);
複製代碼

}

})

'Access-Control-Allow-Origin': ''是容許跨域，固然，通常不會用，會設置某一個地址。

先明確一個概念，預請求是瀏覽器的策略機制，在真正發送請求以前,會先進行一次預請求做用是用於試探性的服務器響應是否正確，若是options得到的迴應是拒絕性質的，就會中止post、get等請求的發出，或者報錯。

會發起預請求有幾個條件：

請求方法不是GET、POST、HEAD

Content-Type不是text/plain、multipart/form-data、application/x-www-form-urlencoded

請求自定義了header字段的

上面三種狀況都會發起預請求，當咱們使用get、post、head方法發起Ajax請求的時候，用上面的接口測試，確實不會發起預請求。並且用這三個請求方法以外的都會報錯，跨域。能夠加容許跨域的方法：

'Access-Control-Allow-Methods': 'PUT'

接着Ajax發起put方法的請求，就會有兩次請求，一次是預請求options，一次是請求成功：

接着測試一下content-type，修改請求：

$.ajax({

url: 'http://192.168.164.16:3000/',

method: 'get',

contentType: 'text/plain',

success: function (res) {

console.log(res);
複製代碼

}

})

分別設置contentType爲上面的三個，發現也不會發起預請求options：

若是換成json的：

測試這個的時候要設置請求頭：'Access-Control-Allow-Headers': '*'。

若是咱們設置另外的header：

$.ajax({

url: 'http://192.168.164.16:3000/',

method: 'get',

headers: {'X-Test': 'ok'},

success: function (res) {

console.log(res);
複製代碼

}

})

也是會發起預請求的。

最後發現，上面三種狀況以外，會發起預請求的也都會報錯跨域。還有就是，有些報跨域，可是數據仍是能獲得，只是瀏覽器認爲是不安全的，你能夠在network看見數據可是你是拿不到數據的。