Redirect to login prevented by CORS policy

Help
1

I’m trying to implement Auth0 authentication locally in a web app.
I have a backend service in node (with express) and a frontend service in VueJs.
I implemented the backend according to the instructions, so now if an endpoint requires authentication, I get a 302 code and redirected to the login screen.

However, when I call the endpoint from the frontend, the redirect is blocked by the browser with this error:

Access to XMLHttpRequest at ‘riseup…’ (redirected from ‘https://localhost:9090/api/no-auth/login’) from origin ‘https://localhost:9090’ 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.

To my understanding, it’s not possible to prevent the redirect and do it manually.
I configured my endpoints in “Allowed Web Origins” and “Allowed Origins (CORS)” to no avail.

Can someone see what I’m doing wrong?

3 Likes
2

Hi,

did you understand what you did wrong? I can do all the authentication but now that I am calling:

 let data = { 
                roles: this.ROLE_USER 
            }
            let instance = axios.create({
                baseURL: `https://${process.env.VUE_APP_AUTH0_DOMAIN}/api/v2/users/`,
                method: 'post',
                mode: 'no-cors',
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Methods': 'POST, OPTIONS',
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + this.accessToken,
                },
            });
            return await instance.post(`${userId}/roles`, JSON.stringify(data));

it started the error:

Access to XMLHttpRequest at ‘https://dev-1flzkotdey2fm74y.us.auth0.com/api/v2/users/auth0|6458c2dc3bed7617bbc58df5/roles’ from origin ‘http://localhost:9999’ 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.

And in the Application I have:

Capture
Capture968×571 51.6 KB

and

Capture

For this reason authentication and JWT is working smoothly.

What am I missing?