如何解决授权服务器重定向后出现的CORS错误？

Question

我向https://auth.pingone.com/xxxxxxxxxxxxx/as/authorize/?response_type=code&client_id=xxxxxxxxxxxxxredirect_uri=http:%2F%2Flocalhost:3000%2F&scope=openid+profile&acr_values=Single_Factor发出了一个GET请求，如果成功，它将返回一个带有302 http状态码的Location头。然后，我的客户端(React.js SPA应用程序)重定向到该位置。在GET请求之前一切正常，但是当客户端尝试重定向到该位置时，CORS错误就出现了。

Access to XMLHttpRequest at 'http://localhost:3000/auth/login?environmentId=xxxxxxxxxxxxx&flowId=xxxxxxxxxxxxx' (redirected from 'https://auth.pingone.com/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.

我之前已经解决了CORS，但这些请求是由我自己的服务器服务的，而不是pingone.com。

我尝试用第一个GET请求传递下面的头，但在印前检查请求期间，即使是第一个GET请求也失败了。

"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"]

ping.com授权服务器设置的响应头为：

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.net (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

我在这里做什么?可能的解决方案是什么？

Answer 1

从你的评论中我可以看出，主要的问题是对localhost含义的误解。http://localhost:3000 -是一种服务器。它是React的dev服务器，托管您的页面。停止React，您将在浏览器中看不到此地址。本地文件在file://协议的帮助下提供服务，而不是通过http://localhost ( http://的存在显然意味着服务器)

阅读https://create-react-app.dev/docs/proxying-api-requests-in-development/可能会有所帮助

为了告诉开发服务器在开发过程中代理任何未知的请求到您的API服务器，可以方便地在您的package.json中添加一个proxy字段，这可以避免CORS问题

对于您的问题，还有其他解决方案，但这可能是文档推荐的最可靠的解决方案

Answer 2

CORS设置必须在服务器端设置。因此，将头添加到get请求不会有任何帮助，因为客户端在您的控制之下。这里您需要的是https://auth.pingone.com上的本地主机所允许的CORS。这就是我能说的。