Jammmの日常-JamPang - fetch
type: channel
link: https://router.jampang.cn/tag/fetch/
items: fetch跨域访问错误

fetch跨域访问错误
type: item
date: 2020-03-18T18:38:00+08:00
description: 服务端是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'); 我把这一行删了以后就可以正常访问