React + ASP.Net-核心 CORS 问题

Question

虽然在将 ReactJS 与 ASP.Net-Core 结合使用时 CORS 是一个大问题，但我想出了如何启用 CORS，所以在访问我的 UI (http://localhost:3000) 时，它使用 SignalR/REST-Calls 反对 API (http://localhost:51761).

这里是Startup.cs

      public void ConfigureServices(IServiceCollection services)
            {
                services.AddCors(option =>
                {
                    option.AddPolicy("myCors",
                        builder =>
                        {
                            builder.AllowAnyHeader().AllowAnyMethod().SetIsOriginAllowed(origin =>
                            {
                                if (origin.StartsWith("http://localhost")) return true;
                                if (origin.StartsWith("http://vdedarh02331")) return true;
                                if (origin.StartsWith("http://10.65.1.23")) return true;
                                return false;
                            });
                        });
                });
                services.AddControllers();
                services.AddSwaggerGen(c => { c.SwaggerDoc("v1", new OpenApiInfo {Title = "SimpleAPI", Version = "v1"}); });
            }
    
     public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                    app.UseSwagger();
                    app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "SimpleAPI v1"));
                }
                app.UseHttpsRedirection();
                app.UseRouting();
                app.UseCors("myCors");
                
    
                app.UseAuthorization();
    
                app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
            }

在我的 React 应用程序上，我正在执行以下 API 调用：

    axios
      .post("http://localhost:51761/Simple/Login")
      .then((response) => console.log(response))
      .catch((error) => {
        console.error(error);
        console.log("Trying to use IP");
        axios
          .post("10.65.1.23:51761/Simple/Login")
          .then((resp) => console.log(resp))
          .catch((err) => console.error(err));
      });

使用 URL http://10.65.1.23:3000 通过浏览器打开 UI 工作正常。针对 API 执行请求会导致以下错误。

调用 localhost:51761 不起作用是有道理的，因为浏览器正在尝试在浏览器机器上调用 API。

在 SetIsOriginAllowed 的内部函数上调试服务器代码时，我认识到每次在我的开发机器上使用 UI 时发出请求时，源总是会被评估（localhost) 但在使用不同的机器时从不。

我是否误解了 CORS 或设置错误？感谢您的帮助！

Answer 1

配置时，需要用URL提及端口号。

在Startup.cs

builder =>
        {
            builder.WithOrigins("http://localhost:51761")
                                .AllowAnyHeader()
                                .AllowAnyMethod();
        });

此外，在控制器级别指定

[EnableCors("MyPolicy")]
public class SimpleController : Controller

Answer 2

我自己解决了这个问题。

所以实际上你需要做的是在你的反应项目package.json中设置代理到API的URL。此外，您需要使 http-request 动态化并将请求的 content-type 设置为非 text/html

因此将 client-code 从

更改为

axios
      .post("http://localhost:51761/Simple/Login")
      .then((response) => console.log(response))
      .catch((error) => {
        console.error(error);
        console.log("Trying to use IP");
        axios
          .post("10.65.1.23:51761/Simple/Login")
          .then((resp) => console.log(resp))
          .catch((err) => console.error(err));
      });

到

    axios
      .post(
        "/Simple/Login",
        {},
        { headers: { "Content-Type": "application/json" } }
      )
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
        console.log("Trying to use IP");
        axios
          .post(
            "/Simple/Login",
            {},
            { headers: { "Content-Type": "application/json" } }
          )
          .then((resp) => {
            console.log(resp);
          })
          .catch((err) => console.error(err));
      });

React + ASP.Net-核心 CORS 问题

React + ASP.Net-Core CORS Problems

c#

reactjs

asp.net-core

http-status-code-400

connection-refused