如何使用 React 修复 ASP.NET 中的 CORS 策略

Question

当使用 Postman 调用我的 API 时，它可以工作，但是，使用我的网站则不行。当我尝试时，我收到以下控制台错误：

从源地址“http://localhost:5243”访问 XMLHttpRequest “http://localhost:3000”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。未检查的runtime.lastError：侦听器指示 异步响应返回true，但是消息通道 在收到回复之前就关闭了

我按照

这篇文章

中的说明修改了program.cs，但没有用。

以下是

program.cs

和

memberadd.jsx

代码：

//Program.cs:

var policyName = "AllowLocalhost3000"; //
var builder = WebApplication.CreateBuilder(args);

// Add CORS policy to allow requests from 'http://localhost:3000'

builder.Services.AddCors(options => 
{ 
    options.AddPolicy(name: policyName, 
        policyBuilder => 
        { 
            policyBuilder.WithOrigins("http://localhost:3000") 
                         .AllowAnyHeader()  
                         .AllowAnyMethod()  
                         .AllowCredentials() 
                         .WithExposedHeaders("Access-Control-Allow-Origin", "http://localhost:3000")
                         .SetIsOriginAllowed((host) => true); 
        }); 
});

builder.Services.AddControllers();

builder.Services.AddEndpointsApiExplorer(); 
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseCors(policyName);

if (app.Environment.IsDevelopment()) 
{ 
    app.UseSwagger(); 
    app.UseSwaggerUI(); 
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();


//MemberAdd.jsx:

try { 
    const response = await axios.post( 
        `http://localhost:5243/MemberFirstName=${encodeURIComponent(member.firstName)}&LastName=${encodeURIComponent(member.lastName)}&DOB=${encodeURIComponent(member.dob)}&email=${encodeURIComponent(member.email)}`
);

if (response.status === 200) {
    alert("Member Added!");
    clearForm();
  } else {
    alert("Failed to add member.");
  }
} catch (error) {
  console.error("Error adding member: ", error);
  alert("An error occurred while adding the member.");
}

Answer 1

.WithExposedHeaders("Access-Control-Allow-Origin", "http://localhost:3000")

用于向客户端公开某些响应标头，但设置 Access-Control-Allow-Origin 不需要它

最多出于安全原因，您应该尝试将数据作为 JSON 对象而不是查询参数传递，同时也是为了更符合 REST 原则。

最后一件事，确保控制器中的接收者方法用 [HttpPost] 装饰