reactjs 启用后CORS

qhhrdooz  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(134)

我正在使用react开发一个Web应用程序。为了调用API,我在Azure函数应用程序中使用HTTP触发器。所有API都正常工作,没有任何问题。我正在集成过程中。我遇到了这个CORS问题。我尝试克服这个问题,但仍然得到相同的错误。而且我没有express.js

    • 程序. cs**
var builder = WebApplication.CreateBuilder(args);

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
                      policy =>
                      {
                          policy.WithOrigins("http://localhost:3000");
                      });
});

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddDbContext<EmployeeDBContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB")));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseCors();
app.UseAuthorization();
app.MapControllers();
app.Run();

React应用程序

const makeAPICall = async () => {
  try {
    const response = await fetch('http://localhost:7182/api/GetEmployees', {mode:'cors'});
    const data = await response.json();
    console.log({ data })
  }
  catch (e) {
    console.log(e)
  }
}

useEffect(() => {
  makeAPICall();
}, [])
return (
  <div className="App">
    <h1>React Cors Guide</h1>
  </div>
);
}

更新
我发现问题是缺少标题。

66bbxpm5

66bbxpm51#

像这样的中间件必须以正确的顺序放置在管道中,有时还必须启用其他中间件
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/middleware/?view=aspnetcore-7.0#middleware-order
根据您的问题,似乎app.UseRouting()丢失(可能是其他原因,上面的文章肯定更清楚)

相关问题