(Edited with new/addt’l info)
- 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 (https://hexdocs.pm/ueberauth_auth0/Ueberauth.Strategy.Auth0.html) to reach out to Auth0 and start an Authorization Code Flow (as @john.gateley recommended to me in SPA + API responsibilities)
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: 126.96.36.199: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:
Help me me understand what I’m missing here… Thanks!