从授权服务器重定向后如何解决 CORS 错误？答案

【问题标题】：How to resolve a CORS error after redirect from authorisation server?从授权服务器重定向后如何解决 CORS 错误？
【发布时间】：2021-05-30 15:30:39
【问题描述】：

我向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

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

【问题讨论】：

http://localhost:3000/auth/login 端点需要完全启用 CORS。问题中引用的错误消息表明它不是。 https://auth.pingone.com 服务器的响应很好。需要理解的一件事是，由于请求是跨源重定向的，因此浏览器会将请求源更改为 null。所以如果http://localhost:3000/auth/login端点被配置为只允许同源请求，那么请求就会失败。
@sideshowbarker 但是我们在服务器端配置 CORS，对吧？ localhost:3000 是浏览器呈现的页面，不涉及服务器。我应该在哪里为此配置 CORS？
不，他的意思是你必须在auth.pingone.com 上运行的服务器上配置 CORS 设置。您有权访问该服务器吗？

标签： javascript rest cors ping

【解决方案1】：

必须在服务器端设置 CORS 设置。因此，将标头添加到 get 请求将无济于事，因为您可以控制客户端。您在这里需要的是 https://auth.pingone.com 上的 localhost 允许的 CORS。我只能说这些了。

【讨论】：

【解决方案2】：

从您的评论中我看到，主要问题是对 localhost 含义的误解。 http://localhost:3000 - 是服务器。它是 React 的开发服务器，用于托管您的页面。停止 React，您将在浏览器中看到此地址上的任何内容。本地文件是在file:// 协议的帮助下提供的，而不是通过http://localhost 提供的（http:// 的存在显然意味着服务器）

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

要告诉开发服务器将任何未知请求代理到您正在开发的 API 服务器，请将 proxy 字段添加到您的 package.json

方便地，这避免了 CORS 问题

您的问题还有其他解决方案，但这个可能是最强大的，并且是文档推荐的

【讨论】：