fetch跨域访问错误

Jammm
2020-03-18 / 0 评论 / 442 阅读 / 正在检测是否收录...

服务端是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)
})

fetch1


当我把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))
})

fetch2

问题

前端肯定没问题,都是跨域访问,怎么到了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');

我把这一行删了以后就可以正常访问
fetch3

本文共 216 个字数,平均阅读时长 ≈ 1分钟
0

打赏

海报

正在生成.....

评论 (0)

取消