[Vuejs]-CORS don't work after JWT authentication added

0๐Ÿ‘

โœ…

  1. 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.
  2. 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}.
  3. Final configuration for CORS:
fastify.register(require('fastify-cors'), {
  origin: '*',
  methods: 'GET,PUT,POST,DELETE,OPTIONS',
})

Leave a comment