React：如何解决“如果 CORS 标头‘Access-Control-Allow-Origin’为‘*’，则不支持凭据”错误？

Posted 2023-02-22

【中文标题】React：如何解决“如果 CORS 标头‘Access-Control-Allow-Origin’为‘*’，则不支持凭据”错误？

【英文标题】：React : how to solve "Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’" error?

【发布时间】：2021-12-02 19:34:32

【问题描述】：

所以我在前端应用程序中使用了第三方 API。我遇到了一些 CORS 问题。由于它是一个公共 API，我联系了 API 维护人员，要求他们解除 CORS 控制。他们已经做到了，似乎是通过将* 放在Access-Control-Allow-Origin 上。

这将是完美的，但是...由于这个（旧）API 需要身份验证，它正在使用 cookie，现在我收到了这个错误（见标题）。

我的应用程序在 React 中，我使用 Axios 和一个

myApiRequest.defaults.withCredentials = true;

行。

有没有办法在前端应用程序中做到这一点，或者后端是唯一的方法？

谢谢！

【问题讨论】：

供参考（不是答案）：MDN "Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’"

@kca 已经回答了这个问题，恕我直言。

我当然已经阅读过这个文档。我的问题是：有没有其他方法可以做到这一点而不使用这种不受支持的方法？

为什么这是不受支持的方法？

【参考方案1】：

两个问题需要两个不同的解决方案

在您的网站上允许第三方域

这是您最终使用 CROS 和 ACAO 的地方。一般来说，它控制了哪个域可以访问这个网站，是加载脚本还是渲染图像。

Cookie 政策

您可以使用 cookie 政策控制您的 cookie 如何与第三方域或任何 JS 代码共享。检查严格，松懈。

但不要共享不受信任的网站来访问您的 cookie。因为他们代表用户请求资源。

推荐方法

尝试执行服务器到服务器的请求，并使用您的服务器作为中间人来获取所有数据。

【参考方案2】：

您是否查看过用于控制跨域请求的其他标头？

您没有指定要向其发出请求的第 3 方 API，但这可能是 Access-Control-Allow-Origin 不够吗？

我认为第 3 方 API 服务器至少也需要指定以下两个标头：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

可以关联：https://***.com/a/24689738/5747327 和 https://***.com/a/19744754/5747327

【参考方案3】：

据此MDN：

要在客户端更正此问题，请确保在发出 CORS 请求时凭据标志的值为 false。

将您的凭据设置为 false：

 myApiRequest.defaults.withCredentials = false;

注意：来自不同域的 XMLHttpRequest 响应无法为其自己的域设置 cookie 值，除非在发出请求之前将 withCredentials 设置为 true，无论 Access-Control- 标头值如何。

在后端单独使用XMLHttpRequest请求，如this：

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load", transferComplete);
oReq.addEventListener("error", transferFailed);
oReq.addEventListener("abort", transferCanceled);

oReq.open();

你的问题的答案：

我的问题是：有没有其他方法可以在不使用这种不受支持的方法的情况下做到这一点？

是：因为，您使用的是从服务器端发送的请求，所以您只能通过支持的方法使用它，没有其他方式。

阅读链接：

Axios - No 'Access-Control-Allow-Origin' - CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

【讨论】：

那么请求需要 cookie 的 API 的唯一方法是从后端？

目前是，因为请求是从服务器处理的，而服务器肯定来自后端。或者，如果您想从前端处理它，请在客户端脚本中使用 on* 函数。

这些“on* 函数”是什么？

尝试阅读我的答案中的链接。