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

但是在 Browser 中，当我从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并在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），并说它对他有用，所以想知道这可能是一个 superagent语法问题？

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

为什么我没有在Chrome工具中看到请求网络标签为此？

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

Answer 1

默认情况下，问题是CORS限制标头，而在调用CORS请求时，您看不到“授权”标头。因此，调整服务器以让它在其设置中发送授权标头。

例如在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"