如何解决无法通过浏览器扩展解决的 CORS 错误？

Posted 2023-03-04

【中文标题】如何解决无法通过浏览器扩展解决的 CORS 错误？

【英文标题】：How to solve a CORS error that cannot be solved with a browser extension?

【发布时间】：2021-09-24 13:20:28

【问题描述】：

我有一个可用的 React 应用程序，它的后端是用 .NET Core 制作的。我遇到了 CORS 问题。明确记录的错误。最初，我通过使用 chrome 扩展 (this one) “解决”了这个问题，正如 here 解释的那样。

后来，我尝试了一个更好的选择，allowing CORS via code in my .NET Core application。这解决了我的问题。我的反应应用程序（使用 localhost:3000）能够使用后端（localhost:5000）。不再需要扩展。

从逻辑上讲，我真的很高兴一切正常。但是，在将我的应用程序放入云端（前端为 AWS Amplify，后端为 EKS）后，出现了问题。甚至我的扩展也无助于解决它。显然，在使用 AWS Amplify 而不是 localhost 时，我遇到了另一种 CORS 问题。

这是一个即使是扩展也无法解决的问题（也没有编码）。从逻辑上讲，我的扩展对我没有帮助并不是直接的问题。但是，这表明我只是遇到了另一种 CORS 问题。

由于扩展程序无法解决，我遇到了哪些不同类型的 CORS 问题？

以及如何解决这个问题？

【问题讨论】：

我看不到任何代码，你做了什么。尝试谷歌或搜索***。你会发现成千上万的答案开始。如果您在此之后有问题，请告诉我们。

@Serge 正如我的帖子中所解释的，我已经用谷歌搜索并发现了非常有用的博客和文档。我还提到了那些带有链接的来源。这几乎完全解决了我的问题。几乎，就在使用 AWS Amplify 时，它对我不起作用。

请张贴您现在已经拥有的内容。这样，您将不会再次获得与答案相同的代码。 Cors 很棘手，一行可以改变每一行。

@Serge 我提到的来源来自谷歌搜索。这些来源已经证明非常有用，几乎（！！）解决了我的问题。它工作正常，除非在 AWS Amplify 中运行。然后它没有。怎么会？以及如何解决？ .我还提到了我从微软文档中复制的代码。

在AWS Amplify中运行返回的header是否正常docs.aws.amazon.com/apigateway/latest/developerguide/…

【参考方案1】：

在 NetCore 项目的 Startup.cs 文件中，转到配置部分并添加：

app.UseCors(builder =>
      
         builder.SetIsOriginAllowedToAllowWildcardSubdomains()
           .WithOrigins("http://example.com") //Put your React app url here
           .AllowAnyHeader()
           .AllowAnyMethod()
           .AllowCredentials();
        );

它在同样的情况下对我有用。

【参考方案2】：

您需要将 content-type 标头添加到您的 CORS 策略中：

  builder.WithOrigins("http://example.com")
                           .WithHeaders(HeaderNames.ContentType) // Add your allowed headers here
                           .WithMethods("PUT", "DELETE", "GET", "OPTIONS");

查看Microsoft CORS Docs