从 React JS 向跨域节点 (Express) API 发送身份验证标头答案

【问题标题】：Send Authentication Header from React JS to Cross Domain Node (Express) API从 React JS 向跨域节点 (Express) API 发送身份验证标头
【发布时间】：2018-01-15 22:20:18
【问题描述】：

我是这个 CORS 问题的新手，正在努力找出问题所在。

我有两个应用程序：

在http://localhost:3000/ 上托管的反应应用程序
http://localhost:4000/ 上托管的节点 api

在 react 应用端，我正在尝试使用令牌传递一个 Authorization 标头：

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

但我在节点（快递）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'));

【问题讨论】：

这可能是因为您正在发送自定义 http 标头（在这种情况下为授权），这将导致向您的节点服务器发出预检 OPTIONS 请求。请在您的问题中包含您的 CORS 配置以及路由处理程序。
我已经添加了我拥有的路由，但不确定 CORS 配置的含义。你能解释一下吗？
在完成 CORS 配置后设法深入了解它，感谢 VF_！ :)

标签： javascript node.js reactjs cors

【解决方案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)
})

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

【讨论】：