服务端是node.js
碰到一个很神奇的问题
先看下具体报错信息
Access to fetch at 'http://localhost:3000/books' from origin 'null' has been blocked by CORS policy: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
当看到CORS,field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response
这些字样的时候就知道是跨域访问的问题,关键是我设置了跨域访问。下面有我设置的具体代码。我们先接着往下看
用以下代码访问时没有问题
fetch('http://localhost:3000/books',{
method:'post',
body:'uname=jam&pwd=123',
headers:{
'Content-type':'application/x-www-form-urlencoded'
}
})
.then(function(data){
//text方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回数据
return data.text();
})
.then(function(data){
//这里才是最终的数据
console.log(data)
})
当我把post提交内容改成Json格式就出现了跨域访问的问题
fetch('http://localhost:3000/books',{
method:'post',
body:JSON.stringify({
uname:'jam',
pwd:'4565'
}),
headers:{
'Content-Type':'application/json'
}
})
.then(function(data){
return data.text()
})
.then(function(data){
console.log((data))
})
问题
前端肯定没问题,都是跨域访问,怎么到了json就出问题
以下是node.js的跨域设置
// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Headers', 'mytoken');
next();
});
找来找去问题出现在倒数第二行。
res.header('Access-Control-Allow-Headers', 'mytoken');
我把这一行删了以后就可以正常访问
本文共 216 个字数,平均阅读时长 ≈ 1分钟
评论 (0)