(Edited with new/addt’l info)
Context:
- NuxtJS (VueJS) SPA running on http://localhost:3000
- Phoenix-based REST API running on http://localhost:4004 (running ueberauth-auth0)
- Auth0 regular web application
- Auth0 client ID and secret are available to the Uebuerauth framework in my Phoenix app
I have a route (GET /api/auth/auth0) that triggers ueberauth-auth0 (Ueberauth.Strategy.Auth0 — Ueberauth Auth0 v2.1.0) to reach out to Auth0 and start an Authorization Code Flow (as @john.gateley recommended to me in SPA + API responsibilities - #6)
Using Insomnia if I execute that route against my REST API I get the Auth0 universal login form as expected, so I know that the REST API part of my setup is working as expected.
However, executing the same exact route from my Nuxt app results in a CORS error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://naboo.auth0.com/authorize?client_id=xxxxxmhDNNEQS…th0%2Fcallback&response_type=code&scope=openid+profile+email. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
I know what CORS is and I’ve tried to configure for it (see below).
From Chrome dev tools network tab, here’s my Nuxt’s app’s pre-flight request just before the redirect would occur (and immediately before the CORS error occurs):
Request URL: https://naboo.auth0.com/authorize?client_id=xxxxxxxNNEQS2NyxHxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A4004%2Fapi%2Fauth%2Fauth0%2Fcallback&response_type=code&scope=openid+profile+email
Request Method: OPTIONS
Remote Address: 34.213.13.63:443
Status Code: 200
Version: HTTP/2
Referrer Policy: no-referrer-when-downgrade
Request Headers:
Host: naboo.auth0.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:77.0) Gecko/20100101 Firefox/77.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Referer: http://localhost:3000/
Origin: http://localhost:3000
Connection: keep-alive
TE: Trailers
Response Headers:
HTTP/2 200 OK
date: Mon, 29 Jun 2020 01:07:19 GMT
content-type: text/plain; charset=utf-8
content-length: 2
server: nginx
ot-tracer-spanid: 1c4f351a49f69bc4
ot-tracer-traceid: 1ce0269e4e251871
ot-tracer-sampled: true
ot-baggage-auth0-request-id: 12b402f6410c035935b8b33e
x-auth0-requestid: db04ae8908a55c2a63b5
set-cookie: did=s%3Av0%3Ae148ef50-b9a4-11ea-8eff-17e93d3f3ab5.x30FKNZU%2Fndsi0I%2FTWeZsyVbZnvsqHzf3QxLCJzEWDc; Max-Age=31557600; Path=/; Expires=Tue, 29 Jun 2021 07:07:19 GMT; HttpOnly; Secure; SameSite=None
set-cookie: did_compat=s%3Av0%3Ae148ef50-b9a4-11ea-8eff-17e93d3f3ab5.x30FKNZU%2Fndsi0I%2FTWeZsyVbZnvsqHzf3QxLCJzEWDc; Max-Age=31557600; Path=/; Expires=Tue, 29 Jun 2021 07:07:19 GMT; HttpOnly; Secure
access-control-max-age: 1000
access-control-allow-methods: GET, PUT, POST, DELETE, PATCH, OPTIONS
access-control-allow-headers: Origin, Content-Type, Accept, X-Requested-With, Authorization, Auth0-Client, X-Request-Language
etag: W/"2-nOO9QiTIwXgNtWtBJezz8kv3SLc"
cache-control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0, no-transform
strict-transport-security: max-age=15724800
x-robots-tag: noindex, nofollow, nosnippet, noarchive
X-Firefox-Spdy: h2
Notably missing in the response is the Access-Control-Allow-Origin header - just like the error message says! - despite the fact that in my Auth0 application’s Applications page I set the “Allowed Web Origins” and “Allowed Origins (CORS)” to:
http://localhost:3000
Help me me understand what I’m missing here… Thanks!