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

Question

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

我有两个应用程序：

• 托管在上的react应用程序http://localhost:3000/

在响应应用端，我试图通过一个授权标头与令牌如下：

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端收到的标题如下：

{ 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'));

Answer 1

以下是对我有效的代码：

//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)
})

以及服务器中的cors配置。js文件：

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();
}