Javascript 由于缺少自定义标头，身份验证中间件会阻止选项飞行前请求

我有一个React应用程序，它使用

axios

作为HTTP库，使用

HTTP代理中间件
包的
express
服务器和包含API的API
express
服务器

React应用程序应通过代理身份验证服务器与API服务器通信，如下所示：

server.all('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, x-access-token')
    res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
    res.header('Access-Control-Allow-Credentials', 'true')
    next()
  })


在React应用程序中，我创建了以下测试方法：

testReq(){
    axios.get('http://localhost:5000/applicationData/checkMe', {
      withCredentials: true,
      headers: {
        'x-access-token': '...'
      }
    })
    .then(response => console.log(response.status))
    .catch(e => console.log(e))
  }

这是我的代理方法的外观：

server.use('/applicationData', authenticate, proxy({
    target: 'http://localhost:4000',
    changeOrigin: false,
    onProxyReq(proxyReq, req) {
      // proxyReq.setHeader('x-access-identity-email', req.decodedToken.email)
    },
  }))

这是上面使用的
验证
中间件功能：

module.exports = (req, res, next) => {
  const token = req.headers['x-access-token']
  console.log('token', token)
  if (token) {
    verifyToken(token, global.config.secret).then((verificationResponse) => {
      const { decoded, message } = verificationResponse
      if (!decoded) return res.status(401).json({ message })
      req.decoded = decoded
      return next()
    })
    .catch((err) => {
      console.error(err)
      res.status(500).json({ message: 'Internal error' })
    })
  } else return res.status(401).json({ message: 'Missing authentication token' })
}

我在API和代理服务器上都启用了CORS，如下所示：

server.all('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, x-access-token')
    res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
    res.header('Access-Control-Allow-Credentials', 'true')
    next()
  })

问题是，当发送请求时，我会得到以下响应：


我假设这是由于身份验证中间件试图从
OPTIONS
请求访问
x-access-token
头，该请求不存在，因此返回401。若我从代理方法中删除
身份验证
中间件，那个么请求就会通过

如何使
x-access-token
出现在
OPTIONS
请求中？或者，处理这种情况的正确方法是什么？
在facebook中不允许粘贴代码不确定，为什么，所以粘贴到这里：

在您的中间件中缺少的是（如您所评论的选项部分）：

对于错误部分，正如您所说的在cors部分之前触发身份验证，因此您可能必须在身份验证之前设置该代码（安全部分我不太确定）
我认为行：

    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, x-access-token')

应该是：

    res.header('Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, x-access-token')

将其更改为“Access-Control-Allow-Origin”和“*”
@zabusa我认为这没有关系。请阅读问题的最后部分。根据你的建议：当我这样做的时候，我又犯了一个错误。对飞行前请求的响应未通过访问控制检查：当请求的凭据模式为“包括”时，响应中“访问控制允许来源”标头的值不得为通配符“*”。来源'localhost:3000'；因此不允许访问。XMLHttpRequest启动的请求的凭据模式由withCredentials属性控制。您能详细说明一下吗？这看起来像是密钥“Access Control Allow Headers”的重复，可能服务器没有正确解析该行是的，可能需要解决此问题，但这与当前的问题无关（请阅读问题的最后部分）.我做了更多的谷歌搜索，我能找到的唯一解决方案是上面的答案中提到的一个，但它闻起来不安全…好吧，在使用上面的解决方案之前，我要确保服务器工作正常：如果不允许x-access-token，选项请求可能会被拒绝。选项请求的问题是它会删除所有自定义头文件都来自自身。（afaik）有人能确认这种方法是安全的吗？