Jammmの日常-JamPang Jammm的日常,Jampang的日常,Jampang,Jam日志,Share daily life and what I learnt,日常,代码,笔记本电脑推荐,台式机配置单

fetch跨域访问错误

⚠️ 本文最后更新于2020年03月18日,已经过了2090天没有更新,若内容或图片失效,请留言反馈

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

By Jammm On