I made an GET request to /?response_type=code&client_id=xxxxxxxxxxxxxredirect_uri=http:%2F%2Flocalhost:3000%2F&scope=openid+profile&acr_values=Single_Factor which on success returns a Location header with 302 http status code. Then my client(React.js SPA application) redirect onto that location. Everything is working until the GET request but when the client tries to redirect to the location, CORS error es up.

Access to XMLHttpRequest at 'http://localhost:3000/auth/login?environmentId=xxxxxxxxxxxxx&flowId=xxxxxxxxxxxxx' (redirected from '/?response_type=code&client_id=xxxxxxxxxxxxxredirect_uri=http:%2F%2Flocalhost:3000%2F&scope=openid+profile&acr_values=Single_Factor') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have earlier resolved CORS but those requests were served by my own server, not the pingone.
I tried passing the below headers with the first GET request but then even the first GET request fails during preflight request.

"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": ["GET", "POST", "OPTIONS", "HEAD"],
"Access-Control-Allow-Headers": ["Origin", "Content-Type", "Accept", "X-Requested-With", "Access-Control-Allow-Methods"]

The response header set by the ping authorisation server is:

access-control-allow-credentials: true
access-control-allow-headers: Origin,Content-Type,Content-Length,Content-Disposition,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,Cookie,Accept
access-control-allow-methods: OPTIONS,GET,POST
access-control-allow-origin: http://localhost:3000
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
content-type: application/json
correlation-id: xxxxxxxxxxxxx
date: Mon, 01 Mar 2021 03:44:19 GMT
expires: 0
location: http://localhost:3000/auth/login?environmentId=xxxxxxxxxxxxx&flowId=xxxxxxxxxxxxx
pragma: no-cache
via: 1.1 01583e0e72b60e3d0d303e6b00e52b4d.cloudfront (CloudFront)
x-amz-apigw-id: xxxxxxxxxxxxx
x-amz-cf-id: xxxxxxxxxxxxx
x-amz-cf-pop: DEL51-C1
x-amzn-remapped-content-length: 0
x-amzn-requestid: xxxxxxxxxxxxx
x-amzn-trace-id: Root=1-603c6313-16fbca26388a6f732bb098e9;Sampled=0
x-cache: Miss from cloudfront

What I am doing here and what are the possible solutions?

I made an GET request to https://auth.pingone./xxxxxxxxxxxxx/as/authorize/?response_type=code&client_id=xxxxxxxxxxxxxredirect_uri=http:%2F%2Flocalhost:3000%2F&scope=openid+profile&acr_values=Single_Factor which on success returns a Location header with 302 http status code. Then my client(React.js SPA application) redirect onto that location. Everything is working until the GET request but when the client tries to redirect to the location, CORS error es up.

Access to XMLHttpRequest at 'http://localhost:3000/auth/login?environmentId=xxxxxxxxxxxxx&flowId=xxxxxxxxxxxxx' (redirected from 'https://auth.pingone./xxxxxxxxxxxxx/as/authorize/?response_type=code&client_id=xxxxxxxxxxxxxredirect_uri=http:%2F%2Flocalhost:3000%2F&scope=openid+profile&acr_values=Single_Factor') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have earlier resolved CORS but those requests were served by my own server, not the pingone..
I tried passing the below headers with the first GET request but then even the first GET request fails during preflight request.

"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": ["GET", "POST", "OPTIONS", "HEAD"],
"Access-Control-Allow-Headers": ["Origin", "Content-Type", "Accept", "X-Requested-With", "Access-Control-Allow-Methods"]

The response header set by the ping. authorisation server is:

access-control-allow-credentials: true
access-control-allow-headers: Origin,Content-Type,Content-Length,Content-Disposition,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,Cookie,Accept
access-control-allow-methods: OPTIONS,GET,POST
access-control-allow-origin: http://localhost:3000
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
content-type: application/json
correlation-id: xxxxxxxxxxxxx
date: Mon, 01 Mar 2021 03:44:19 GMT
expires: 0
location: http://localhost:3000/auth/login?environmentId=xxxxxxxxxxxxx&flowId=xxxxxxxxxxxxx
pragma: no-cache
via: 1.1 01583e0e72b60e3d0d303e6b00e52b4d.cloudfront (CloudFront)
x-amz-apigw-id: xxxxxxxxxxxxx
x-amz-cf-id: xxxxxxxxxxxxx
x-amz-cf-pop: DEL51-C1
x-amzn-remapped-content-length: 0
x-amzn-requestid: xxxxxxxxxxxxx
x-amzn-trace-id: Root=1-603c6313-16fbca26388a6f732bb098e9;Sampled=0
x-cache: Miss from cloudfront

What I am doing here and what are the possible solutions?

• javascript
• rest
• cors
• ping

• The http://localhost:3000/auth/login endpoint needs to be fully CORS-enabled. The error message cited in the question shows that it’s not. The response from the https://auth.pingone. server is fine. One thing it’s important to understand is that because the request is redirected across origins, the browser changes the request origin to null. So if the http://localhost:3000/auth/login endpoint is configured to only allow same-origin requests, then the request will fail. – sideshowbarker ♦ Commented Mar 1, 2021 at 4:28
• @sideshowbarker but We configure CORS at server side, right? localhost:3000 is a browser rendered page, no server involved. Where should I configure the CORS for this? – The Coder Commented Mar 1, 2021 at 7:12
• No, he means that you have to configure the CORS settings on the server which runs on auth.pingone.. Do you have access to that server? – Gh05d Commented Mar 10, 2021 at 11:45

2 Answers 2

From your ment I see, that the main issue is the misinterpretation of what localhost means. http://localhost:3000 - is a server. It's React's dev server, that hosts your page. Stop React, and you'll see nothing in the browser on this address. Local files are served with the help of file:// protocol, not through http://localhost (well the presence of http:// clearly implies a server)

This reading https://create-react-app.dev/docs/proxying-api-requests-in-development/ may help

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json

Conveniently, this avoids CORS issues

There're other solutions to your problem, but this one is probably the most robust and remend by the docs

The CORS settings have to be set on the server side. So adding the header to the get request will not help as you have the client side under your control. What you need here is CORS allowed for localhost on https://auth.pingone.. That's all I can say.