尝试执行 localhost API 时在 ReactJS 应用程序中出现 CORS 错误

Question

我正在尝试创建一个简单的应用程序来进行一些 AES 加密（工作所需）。我在 ReactJS 中创建了一个小应用程序，它有一个纯文本文本框、一个调用 encrypt 方法的按钮，以及一个显示加密值的只读文本框。

加密方法调用我用 ASP.NET Core（目前位于本地）编写的 API 来测试加密。当我在 Postman 和/或浏览器中执行时，API 成功加密并返回加密值，但是当我通过我的 React 应用程序执行时，它会引发 CORS 错误。

我在创建 API 和 React 方面都非常陌生，所以如果修复非常简单，请提前道歉。

这是我在 API 项目中的Startup 类：

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
        services.AddControllers();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseCors(
            options => options.WithOrigins("https://localhost:5001/encryption/encrypt").AllowAnyMethod()
        );

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseHttpsRedirection();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });

    }
}

然后这是我在 React 应用程序中的 encrypt 方法：

encrypt() {
var plainText = this.textToEncrypt.value;
console.log(plainText);

var requestOptions = {
  method: 'GET',
  headers: {
    'Access-Control-Allow-Origin' : '*'
  }
};

fetch("https://localhost:5001/encryption/encrypt?plainText=" + plainText, requestOptions)
  .then(response => response.text())
  .then(data => this.setState({ encryptedText: data.value }))
  // .then(result => console.log(result))
  .catch(error => console.log('error', error));
}

这是来自浏览器控制台的错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:5001/encryption/encrypt?plainText=sample%20text. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Answer 1

这不是一个完美的方法，因为这绝对不是您想要在生产环境中解决问题的方式，但出于开发目的，您可以尝试一下。

if (env.IsDevelopment())
{
    app.UseCors(
        options => options.WithOrigins("*").AllowAnyMethod()
    );
}

这将代替您当前的UseCors 实现。您当前实现的问题是（如果语法正确）只允许来自其自身的 CORS。您需要允许来自节点服务器源（或运行您的 Web 应用程序的任何域/端口）的 CORS。由于您没有在帖子中指出，* 涵盖了所有内容（非常不安全，提醒一下，对于生产而言）。

Answer 2

我不知道我们是否有同样的 CORS 问题，但是一旦我通过这些更改解决了这个问题： 在 package.json 文件中添加这一行：

"proxy": "http(s)://backend.url/api",

和/或通过在 .env 文件中禁用主机检查：

DANGEROUSLY_DISABLE_HOST_CHECK=true