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看见数据可是你是拿不到数据的。