我正在使用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>
);
}
更新
我发现问题是缺少标题。
1条答案
按热度按时间66bbxpm51#
像这样的中间件必须以正确的顺序放置在管道中,有时还必须启用其他中间件
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/middleware/?view=aspnetcore-7.0#middleware-order
根据您的问题,似乎app.UseRouting()丢失(可能是其他原因,上面的文章肯定更清楚)