我创建了一个带有单个 Controller 的 ASP.Net CORE Web API 项目,现在想从客户端 (React) Web 应用程序调用它。
但是,调用失败,并显示“请求的资源上不存在“Access-Control-Allow-Origin” header 。”。
从 Fiddler 调用同一端点时,预期的响应 header 不存在。
感谢 ATerry,我有了进一步的了解: header 不存在,因为 React Web 应用程序和 .Net Core Web API 托管在同一个盒子上。 React 填充请求 Origin: header ,该 header 与 (API) 框相同,因此服务器(对此非常聪明)不会添加 Allow-... 响应 header 。但是,React 应用程序拒绝响应,因为缺少这些 header 。
我正在使用 .Net Core v2.1(撰写本文时最新版本)。
我基于
构建了代码https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1
我检查了这些
https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas
How to enable CORS in ASP.NET Core
...但所有建议都不起作用。
有什么想法吗?
这就是我配置 .Net Core 应用程序的方式(代码从实际更改为尝试并允许任何内容):
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)
{
// Enable CORS (Cross Origin Requests) so that the React app on a different URL can access it
// See https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1
services.AddCors(options =>
{
options.AddPolicy(Global.CORS_ALLOW_ALL_POLICY_NAME, builder => builder
.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials());
});
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
app.UseCors(Global.CORS_ALLOW_ALL_POLICY_NAME);
app.UseHttpsRedirection();
app.UseMvc();
}
}
由于上述方法失败,我也将 CORS 属性添加到 Controller 类和 Controller 方法中:
[Route("api/[controller]")]
[ApiController]
[EnableCors(Global.CORS_ALLOW_ALL_POLICY_NAME)]
public class DealsController : ControllerBase
{
[...]
[HttpGet]
[EnableCors(Global.CORS_ALLOW_ALL_POLICY_NAME)]
public ActionResult<List<Deal>> GetAll()
{
return Store;
}
}
我得到的响应 header :
HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Kestrel
X-Powered-By: ASP.NET
Date: Thu, 06 Sep 2018 12:23:27 GMT
缺少的 header 是:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
最佳答案
我相信它也应该与 LOCALHOST 托管一起正常工作,只需执行以下更改并删除以及任何额外的更改/配置。
替换这个:
// Enable CORS (Cross Origin Requests) so that the React app on a different URL can access it
// See https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1
services.AddCors(options =>
{
options.AddPolicy(Global.CORS_ALLOW_ALL_POLICY_NAME, builder => builder
.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials());
});
这样:
services.AddCors();
并替换它:
app.UseCors(Global.CORS_ALLOW_ALL_POLICY_NAME);
这样:
app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
注意:
即使您的 Web Api 和 React 应用程序在 LOCALHOST 上配置,也不意味着它们来自同一来源,这是因为它们托管在不同的端口上,例如 React 应用程序托管在 LOCALHOST:3000 上,而 Web Api 是托管在 LOCALHOST:5000 上。如果客户端(react 应用程序)从不同端口请求,Web api 将投诉。
上述 Web Api 代码将允许任何来源,但在生产应用程序中,这并不安全,因此您需要允许特定来源对 CORS 访问。
关于asp.net - 无法在 ASP.Net Core Web api 中启用 CORS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52204183/