Access-Control-Allow-Headers 不允许授权

Question

我正在使用 create-react-app 并试图找出我在这里做错了什么。

我使用 supertest 在 mocha 中创建了一个集成测试，效果很好：

  it.only('Can get a list of users', async () => {
      const uri = '/users'

      console.log(uri)

    const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE0OTk0NDM5NDM5MjMsImV4cCI6MTUwMjAzNTk0MzkyMywidXNlclVVSUQiOiI1YjMyMTQ4MC00ZmY1LTExZTctYWMwNi1kNWNmZmY0NmZjOGMiLCJjc3JBZG1pbiI6dHJ1ZSwiY29nbml0b1VzZXJBcm4iOiJ1cy13ZXN0LTI6NGZjMGFlMDgtNjZhNy00ZDUwLTk2ZDAtOWE3ZmQ0ODAzMWUwIiwicHJvZmlsZXMiOlt7InByb2ZpbGVVVUlEIjoiNWIzNDg1ODAtNGZmNS0xMWU3LWFjMDYtZDVjZmZmNDZmYzhjIiwicm9sZSI6Im93bmVyIn1dLCJyb2JvdHMiOltdfQ.WOg2otyaNyU1-mlM0wvkAK4hxOVQtfrQw2202G21al8',
        authorization = `Bearer ${token}`

    let response = await request
        .get(uri)
        .set('Authorization', authorization)
        .accept('application/json')

      expect(response.status).to.equal(200)
      expect(response.body.data[0].uuid.length).to.be.greaterThan(0)
      expect(response.body.data[0].firstName.length).to.be.greaterThan(0)
      expect(response.body.data[0].lastName.length).to.be.greaterThan(0)
      expect(response.body.data[0].email.length).to.be.greaterThan(0)
  })

但是在浏览器中，当从我的UserAPI.js制作相同类型的clal时，它失败了。我什至硬编码了一个我知道有效的令牌，它与在集成测试中有效的令牌相同：

  const FindAllUsers = async (token) => {
    try {
      return await request
        .get(url)
        .set('Content-Type', 'application/x-www-form-urlencoded')
        .set('Authorization', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE0OTk0NDM5NDM5MjMsImV4cCI6MTUwMjAzNTk0MzkyMywidXNlclVVSUQiOiI1YjMyMTQ4MC00ZmY1LTExZTctYWMwNi1kNWNmZmY0NmZjOGMiLCJjc3JBZG1pbiI6dHJ1ZSwiY29nbml0b1VzZXJBcm4iOiJ1cy13ZXN0LTI6NGZjMGFlMDgtNjZhNy00ZDUwLTk2ZDAtOWE3ZmQ0ODAzMWUwIiwicHJvZmlsZXMiOlt7InByb2ZpbGVVVUlEIjoiNWIzNDg1ODAtNGZmNS0xMWU3LWFjMDYtZDVjZmZmNDZmYzhjIiwicm9sZSI6Im93bmVyIn1dLCJyb2JvdHMiOltdfQ.WOg2otyaNyU1-mlM0wvkAK4hxOVQtfrQw2202G21al8')
        .accept('application/json')
    }
    catch(err) {
      console.log(err)
    }
  }

错误我在浏览器中得到：

我知道这不是 CORS 问题所以忽略它，这是一个误导性错误。所以它击中了那个 try/catch 并且在捕获时失败了，这就是你在浏览器中看到的记录

我的意思是我不认为我在 UserApi 中的语法格式不正确至少我没有看到任何错误，它与我从集成测试中粘贴的代码相同！

**服务器端 REST API 对 OPTIONS 请求的响应 - 我们是否遗漏了什么？ **

服务器在成功调用时发回以下内容（假设我通过集成测试或邮递员进行调用）例如：

Access-Control-Allow-Headers →Content-Type, Accept Access-Control-Allow-Methods →GET, POST, DELETE, PUT, PATCH, OPTIONS Access-Control-Allow-Origin →*

是SuperAgent吗??

我们的后端 API 开发人员自己在浏览器中进行了测试（未使用 superagent）并表示它对他有效，所以想知道这是否是一个超级代理语法问题？

我正在使用 create-react-app，据我所知，您无需担心为 CORS 设置任何内容。

为什么我在 Chrome 工具中看不到请求 |这个的网络选项卡？

当我在 chrome 中查看此错误，然后尝试为此查找实际的 GET 请求时，我只看到浏览器发出的 OPTIONS 请求。我没有看到对 /users 的请求。为什么？

Answer 1

问题是 CORS 默认限制 headers，调用 CORS 请求时您看不到 "Authorization" header。因此，调整服务器以让它在其设置中发送授权 header。

例如在 apache httpd:

Header add Access-Control-Allow-Headers "Content-Type, Accept, Authorization, other_header"
Header add Access-Control-Expose-Headers "Content-Type, Accept, Authorization, other_header"

Access-Control-Allow-Headers 不允许授权

Authorization is not allowed by Access-Control-Allow-Headers

javascript

node.js

superagent

supertest

react-redux