以前写用node.js写了api后台,但在对接的时候遇到了很多的问题.node
由于实验比较简单,就用了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,说实话,以前只是据说过这个方法,但根本不知道为何会出现这个方法,也不知道这个方法有什么用:ios
去搜索了一下:为何会有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(); });
感受本身基础还不是很好,还有不少的基础知识不了解,因此在实践的时候常常会遇到许多意想不到的事。