Missing "Access-Control-Allow-Origin" header in CORS pre-flight for "/authorize" endpoint

Get Help
1

Hello Auth0 team,

I’d like to pick up a closed topic regarding this issue:

The mentioned topic describe exactly the problem I have. Unfortunately it was closed after 14 days because the topic opener didn’t get any response from you (the Auth0 team).

I alread specified the settings “Allowed Origins” and “Allowed Web Origins” in the application settings. I was able to verify with a preflight request to the endpoint “/passwordless/start” that the settings work.

But here’s what I get during a preflight request to the “/authorize” endpoint:
curl -X OPTIONS -i ‘https://…/authorize’
-H ‘Accept: /’
-H ‘Access-Control- Request-Method: POST’
-H ‘Access-Control-Request-Headers: content-type’
-H ‘Origin: https://localhost:5001’
-H ‘DNT: 1’
-H ‘Connection: keep-alive’
-H ‘Pragma: no-cache’
-H ‘Cache-Control: no-cache’

HTTP/2 200
date: Fri, 24 Jul 2020 06:56:21 GMT
content-type: text/plain; charset=utf-8
content-length: 2
server: nginx
ot-tracer-spanid: 30894c613bda9a52
ot-tracer-traceid: 5a4ed6a33a6e9b5d
ot-tracer-sampled: true
ot-baggage-auth0-request-id: 999a12d050678994ec5cb284
x-auth0-requestid: 87723fb02518c98f9c98
set-cookie: did=...
set-cookie: did_compat=...
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

There is no Access-Control-Allow-Origin header.

I’d expect an additional header to be returned:
access-control-allow-origin: https://localhost:5001

Interestingly enough, if I send a preflight request to the “/passwordless/start” endpoint, the desired header is included.

Is there any reason why you don’t send the “access-control-allow-origin” header in a preflight request to “/authorize”?
When will this be fixed?
I hope my topic here won’t get automatically closed just because no one is answering me like in the mentioned topic.

Best regards
Torben

3

After nobody from the Auth0 team seems to be interested to help with the issue, we decided to move the authentication to the frontend using auth0-js and the authorization code flow + PKCE
instead of handling everything in the backend. Luckily we also handle the frontend part ourselves to be able to do that. Otherwise the only workaround our team came up with would have been to use a different provider than Auth0.

I’m a bit disappointed by the Auth0 support as nobody seems to want to help with this issue, even in the linked topic where an Auth0 team member already was involved but simply didn’t respond anymore.

8 Likes
4

I have same issue with SPA and find no answer for this :frowning:

5

2024, JAN 15, no support for this issue!!..same problem here!!

7

Hi @TorbenGriebe and everyone!

Welcome to the Auth0 Community!

I am sorry about the late response to your inquiry!

I believe the following community post would be helpful regarding the matter:

Basically, it appears that you are making an XMLHttpRequest to a different domain than your page is on. Due to the nature of CORS, for every request made to a domain, an HTTP cookie is attached to it, thus blocking the request that you are trying to makes.Also, any calls made to the /authorize endpoint should be made via front-channel HTTP requests. They should only be made via a redirect or other top-level browser navigation and this is why CORS is not supported at that API.

Instead of using browser redirect, you are sending asynchronous request which is the reason why Auth0 is not working for you and is giving you CORS error. OAuth endpoints aren’t meant to receive scripted ajax requests via XHR or Fetch or whatever. Instead, the user’s meant to be navigated to the endpoint and then navigated back. You can’t navigate users with XHR.

If you wish to redirect from your front end instead of backend, an example using NextJS would be:

export default function Home() {
    return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <a href='/login'>login</a>
        </div>
    );

You can read more about CORS here:

Hope this helps!

If you have any other questions, feel free to leave a reply or post again on the community!

Kind Regards,
Nik

8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.