Unable to redirect to sign in page due to CORS

Hi,

I have a login button in my JavaScript application that makes a restful request to my http://localhost:8001/login endpoint. This endpoint constructs a URL from the ORG_URL, CLIENT_ID and REDIRECT_URI variables as described in your ‘Use the Authorization Code Flow’ documentation.

The /login endpoint responds with a 303 redirect header, the value of the ‘Location’ header is the aforementioned URL. Here it is, with the sensitive information crossed out:

https://dev-xxxx.okta.com/oauth2/default/v1/authorize?scope=open&state=40946e21-00f7-4feb-a844-d461dbd5559a&client_id=xxx&redirect_uri=%20http://localhost:8001/authorization-code/callback

I was expecting the browser to be redirected to your sign in page, however I get a CORS error. Again I’ve crossed out the sensitive information:

Access to fetch at ‘https://dev-xxx.okta.com/oauth2/default/v1/authorize?scope=open&state=fd391a06-2ecc-4251-9224-cab2ab9c6fad&client_id=xxx&redirect_uri=http://localhost:8001/authorization-code/callback’ (redirected from ‘http://localhost:8001/login’) from origin ‘http://localhost:8001’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I was assuming that the application that I have set up from your control panel would mean that the correct CORS header would be sent by your server?

What step am I missing?

You need to add http://localhost:8001 as a trusted origin in API > Trusted Origins.

Thanks! Actually, I’ve just checked the system logs and the first two failures were due to an erroneous leading space character in the redirect URL, which I’ve now corrected. The last time I tried, the error was ‘unsupported_response_type’. I wonder, if that is related? Anyway, I shall add the trusted origin. I had assumed that it was calculated from the redirect or callback URLs that I supplied. Thanks again.

In fact, yes, http://localhost:8001 has already been added for me, as I’d assumed. So it must be this unsupported response type.

Ah! My mistake, I see that the response_type parameter should be set to ‘code’. Still a CORS error, though. Now the error is ‘no_matching_scope’. I have the scope parameter correctly set to ‘openid’, I believe.

So the problem was that my /login endpoint was being called restfully rather than via a standard link. What also threw me off was that your /authorize endpoint was immediately redirecting rather than showing your sign in page. I have yet to work out why this is.

Hi @djalbat

The /authorize endpoint is not CORS enabled and it requires a redirect in the browser instead of an ajax call. If you would like to prevent this request, you can use post message as exemplified here.

I’d already worked that out, see my reply directly above, but thanks for getting back to me.