Javascript 将身份验证头从React JS发送到跨域节点（Express）API

我对CORS这个问题还不熟悉，正在努力找出问题所在

我有两个应用程序：

• 托管在上的react应用程序
• 托管在上的节点api

在react应用程序端，我正在尝试传递带有令牌的授权标头，如下所示：

fetch('http://localhost:4000/api/address/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'bearer ' + Auth.getToken(),
  },  
  credentials: "include",
  body: JSON.stringify({
    data: "someData"
  })
})

但我在节点（express）API端收到的req.headers如下所示：

{ host: 'localhost:4000',
  connection: 'keep-alive',
  'content-length': '22',
  origin: 'http://localhost:3000',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36',
  'content-type': 'application/x-www-form-urlencoded',
  accept: '*/*',
  referer: 'http://localhost:3000/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1OTg5ODg1ZTM3YjVkYjBiODA5ZDNjN2QiLCJpYXQiOjE1MDIxODgxNTF9.5DLCAplQLN4IQcnbU1ldh5N2_Lr_7R6bCScsLdWDNE4',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.8',
  cookie: 'userid=By6Du-xf-; io=8TchJYAr6cHgAmnAAAAB' }

它缺少授权头，因此，我的身份验证失败，API不工作

我错过了什么

编辑： 路由处理程序：

//address.js
const express = require('express');
const router = express.Router();
const Address = require('mongoose').model('Address');

router.get('/', (req, res, next) => {
  return Address.find({ userId : req.userId}, (userErr, addresses) => {
    if (userErr || !addresses) {
      return res.status(401).end();
    }

    return res.status(200).json({
      success: true,
      addresses: addresses
    });
  });
})


router.post('/add', (req, res, next) => {
  console.log("got here!")
  const addressData = {
    userId: req.userId,
    address: req.body.address.trim()
  };

  const newAddress = new Address(addressData);

  newAddress.save((err) => {
    if (err) { return res.status(401).end(); }

    return res.status(200).json({
      success: true,
      message: "Successfully added address."
    });
  });
})

module.exports = router;

然后我的索引路由文件：

//routes.js
const express = require('express');
const router = express.Router();

const authCheckMiddleware = require('../../middleware/auth-check');
router.use(authCheckMiddleware);

router.use('/address/', require('./address'));

---

以下是对我有效的代码：

//react-app

fetch('http://localhost:4000/api/address/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'bearer ' + Auth.getToken(),
  },
  body: JSON.stringify({
    address: this.refs.address.value,
  })
})
.then(function(res) {
  console.log(res)
})

以及server.js文件中的cors配置：

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())

解码格式错误的JSON的额外好处：

//route.js
router.use(fixReactJSONBug);

router.use('/address/', require('./address'));
module.exports = router;

function fixReactJSONBug(req, res, next) {
  if (Object.keys(req.body).length > 0) {
    req.body = JSON.parse(Object.keys(req.body)[0])
  }

  return next();
}

---

这可能是因为您正在发送一个自定义http头（本例中为授权），这将导致向节点服务器发出飞行前选项请求。请在你的问题中包括你的CORS配置和路由处理程序。我已经添加了我得到的路由，不确定CORS配置是什么意思。你能解释一下吗？在完成CORS配置后，我终于找到了问题的症结所在，谢谢