html文件里post json,H5提交json格式的post请求失败原因一种及解决

开发了一个服务端接口供H5调用， 直接在命令行上调用时正常的。

curl -X POST -H "Content-Type: application/json" 'http://localhost:8080/userAddresses' -d '{"contact":"13600000001","address":"北京市朝阳区"}'

但是在H5页面上调用时 报错

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

原因

For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server. so if server does not allow it will throw errors.

解决方法

在nginx中添加如下配置即可

add_header Access-Control-Allow-Headers X-Requested-With,Content-Type;

即追加一个Content-Type即可

参考文档