options请求

以前写用node.js写了api后台,但在对接的时候遇到了很多的问题.node

res.body

由于实验比较简单,就用了jquery的ajax请求数据,再用post方法发送数据时,api用res.body老是读不到数据,发现头部:Content-Type: application/x-www-form-urlencoded,这致使了发送数据时是以表单形式发送的,用res.body不能获取数据.解决方法也简单,就是把content-Type改为application/json就好了.jquery

$.ajax({

    type: 'POST',

    contentType: 'application/json',

    url: 'http://localhost:3000/' ,

    data:  JSON.stringify({name: 'zhansan'}),

    success: function() {
        console.log('success');
    } ,

    dataType: 'json'

});

options请求

一开始我觉得改成请求头就好了,谁知道改完以后,后台接口连请求都没有接收到。打开浏览器一看,请求方法变成了options,说实话,以前只是据说过这个方法,但根本不知道为何会出现这个方法,也不知道这个方法有什么用:ios

clipboard.png

去搜索了一下:为何会有options请求ajax

文章写的挺详细:json

规范要求,对那些可能对服务器数据产生反作用的 HTTP 请求方法(特别是 GET 之外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否容许该跨域请求。服务器确认容许以后,才发起实际的 HTTP 请求。
以前没用contentType:application/json没有出现options请求,是由于options请求只针对复杂请求,简单请求不会触发options请求,文章也有发送options请求的条件:
当请求知足下述任一条件时,即应首先发送预检请求(使用OPTIONS):

一、使用了下面任一 HTTP 方法:api

PUT跨域

DELETE浏览器

CONNECT安全

OPTIONS服务器

TRACE

PATCH

二、人为设置了对 CORS 安全的首部字段集合以外的其余首部字段。该集合为:

Accept

Accept-Language

Content-Language

Content-Type (but note the additional requirements below)

DPR

Downlink

Save-Data

Viewport-Width

Width

三、Content-Type 的值不属于下列之一:

application/x-www-form-urlencoded

multipart/form-data

text/plain
最后的解决,在后台加上容许optiosn请求便可:

app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With, accept, origin, content-type");
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();
});

总结

感受本身基础还不是很好,还有不少的基础知识不了解,因此在实践的时候常常会遇到许多意想不到的事。

相关文章
相关标签/搜索