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

Question

I'm using create-react-app and trying to figure out what I'm doing wrong here.

I created an integration test in mocha using supertest which works fine:

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

However In the Browser , when the same type of clal is made from my a UserAPI.js, it fails. I even hard coded a token I know works for sure which is the same token that works in the integration test:

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

Error I get in the browser:

I know it's not a CORS issue so ignore that, that's a misleading error. So it's hitting that try/catch and failing at the catch which is what you see logged in the browser

I mean I don't think I malformed my syntax in my UserApi at least I don't see anything wrong, it's the same code I pasted from my integration test that worked!

**Server-side REST API Response to OPTIONS request - are we missing something here? **

the server sends back the following on a successful call (say I make a call via my integration test or say postman) for example:

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

Is it SuperAgent ??

Our backend API dev tested in a browser himself (not using superagent) and said it worked for him so wondering if this might be a superagent syntax issue?

I'm using create-react-app and as far as I know you don't need to worry about setting up anything for CORS.

Why don't I see a request in Chrome tools | Network tab for this?

When I look at this error in chrome and then try to look for the actual GET request for this, I only see an OPTIONS request by the browser. I don't see a request to /users. Why?

Answer 1

The problem is CORS limits headers by default and you do not see "Authorization" header when call CORS requests. So, adjust server to let it send Authorization header in it's settings.

For example in 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"