2

之前写用node.js写了api后台,但在对接的时候遇到了不少的问题.

res.body

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

$.ajax({

    type: 'POST',

    contentType: 'application/json',

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

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

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

    dataType: 'json'

});

options请求

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

clipboard.png

去搜索了一下:为什么会有options请求

文章写的挺详细:

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

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

PUT

DELETE

CONNECT

OPTIONS

TRACE

PATCH

2、人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为:

Accept

Accept-Language

Content-Language

Content-Type (but note the additional requirements below)

DPR

Downlink

Save-Data

Viewport-Width

Width

3、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();
});

总结

感觉自己基础还不是很好,还有很多的基础知识不了解,所以在实践的时候经常会遇到许多意想不到的事。


鲸冬香
456 声望27 粉丝