CORS don't work after JWT authentication added

Question

I have a Vue frontend, an Auth0 and Fastify backend. CORS is configured as follows:

fastify.register(require('fastify-cors'), {
  origin: 'http://localhost:8080',
  methods: 'GET,PUT,POST,DELETE,OPTIONS,HEAD',
  allowedHeaders: 'Origin, X-Requested-With, Content-Type, Accept',
})

Frontend headers configuration:

this.$auth.getTokenSilently().then(token => {
  this.headers = {
    Authorization: `Bearer ${token}` // send the access token through the 'Authorization' header
  };

The problem is common:

Access to XMLHttpRequest at 'http://127.0.0.1:3000/dir' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've read a lot about CORS, know this is a browser side problem (Insomnia sends requests perfectly). Actually, I do not have clear understanding of what else I should allow and how. Basically I need only standart GET, PUT, POST, DELETE requests allowed. Could you please point out the exact configuration problems in my code?

Access-Control-Allow-Origin: http://127.0.0.1:3000, have you tried to give access for origin you have problem with ? — Andrey Radkevich, Mar 21 '21 at 08:33
Access-Control-Allow-Origin: * - this will give access to any request from any origin — Andrey Radkevich, Mar 21 '21 at 08:34
I tried *, it was actually before. Don't work either. But I've read thet there must be an explicit origin config. Origin which tries to access API's endpoint is at 8080, not at 3000. — Dmitry, Mar 21 '21 at 08:45
origin: (origin, cb) => { if(/localhost/.test(origin)){ // Request from localhost will pass cb(null, true) return } // Generate an error on other origins, disabling access cb(new Error("Not allowed")) } have you tried code from doc ? — Andrey Radkevich, Mar 21 '21 at 08:54
It seems that preflight doesn't have a token, this causes 401. But I don't understand how to cope with it cause preflight request is sent by a browser. — Dmitry, Mar 21 '21 at 09:18
Yeah, the `http://127.0.0.1:3000/dir` server needs to be configured to not require authentication for OPTIONS requests. That’s the only change this will fix this. The server much respond to unauthenticated OPTIONS requests with a 200 OK and the necessary CORS headers. For a more-detailed explanation, see the the answer at https://stackoverflow.com/a/45406085/441757 — sideshowbarker, Mar 21 '21 at 09:33
401 is cured, but still have CORS `Access-Control-Allow-Origin` — Dmitry, Mar 21 '21 at 11:01
It's seems that axios POST request doesn't include Authorization header in request. But: `axios .post(`${c.api.path}/dir`, {path: this.cRoot}, this.headers)` and console.log shows that this.headers contains a correct data. — Dmitry, Mar 21 '21 at 14:36

Dmitry · Accepted Answer · 2021-03-22T13:19:39.050

First 401 was caused by OPTIONS request without autentication token. Actually it should be seamlessly processed by a fastify-cors. But due to an incorrect order of initialisation of on-request hooks (first - mine to autenticate, using fastify-auth0-verify, second - implicit hook from fastify-cors), it never invoked. So you need a precise order of hooks explicit and implicit initialization: first - cors, then second - authentication.
The second problem, 401 on the following POST, happened because of incorrect usage of an axios request params on the frontend Vue side. Headers like { Authorization: 'Bearer SomeVeryLongSecretXYZ'}were passed as, for instance, ...post(url, data, this.headers), but there must be {headers : this.headers}.
Final configuration for CORS:

fastify.register(require('fastify-cors'), {
  origin: '*',
  methods: 'GET,PUT,POST,DELETE,OPTIONS',
})

CORS don't work after JWT authentication added

1 Answers1