.NET Core 2 Web API:CORS 问题
Posted
技术标签:
【中文标题】.NET Core 2 Web API:CORS 问题【英文标题】:.NET Core 2 Web API: CORS issues 【发布时间】:2018-09-04 17:37:35 【问题描述】:所以我有一个前端 Angular 应用程序,我在其中填写了一个小表格,并希望将数据发送到我的 Web API,该 API 也在 localhost 上运行。我的 Angular 应用程序在 http://localhost:4200/ 上运行,我的 web api 在 https://localhost:44302/api/input 上运行。
在提交表单时,将调用以下方法:
public uploadFormData(): void
const form = $('#inputForm')[0];
const files = ($('#fileUpload') as any);
const formData = new FormData();
const file = files[0];
formData.append('tenant', form[0].value);
formData.append('title', form[1].value);
formData.append('file', file, file.name);
this.uploadService.uploadForm(formData)
.subscribe(res => this.fileUploaded(res));
private fileUploaded(data: any): void
$('#message').html('Response: 200 OK !');
这将为我服务,如下所示:
public uploadForm(formdata: any)
const url = 'https://localhost:44302/api/input';
const headers = new Headers('encrypt': 'multipart/form-data');
const options = new RequestOptions( headers: headers );
return this.http.post(url, formdata, options)
.catch(this.errorHandler);
private errorHandler(error: Response)
return Observable.throw(error || 'Some error on server occured: ' + error);
如果我删除标题和选项(以及我的 http.post 中的选项),最终结果是相同的:将抛出 500 服务器错误说
"No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed access.
The response had HTTP status code 500."
所以在我的服务器端,我有一个在 localhost 上运行的 .NET Core 2 Web API。这是我的 Startcup.cs 文件,因此您可以看到我已经配置了 CORS:
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
services.AddAuthentication(sharedOptions =>
sharedOptions.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
)
.AddAzureAdBearer(options => Configuration.Bind("AzureAd", options));
services.AddMvc();
services.AddCors();
// 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();
app.UseCors(builder =>
builder.WithOrigins("http://localhost:4200")
//builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
app.UseAuthentication();
app.UseMvc();
在这里你可以找到我的控制器接受输入的代码:
// POST api/input
[HttpPost]
public IActionResult Post(FormCollection data)
var inputdata = data;
//var test = JsonConvert.DeserializeObject<SPInputObject>(data);
return Ok("POST all good");
我什至不知道“FormCollection 数据”是否是正确的参数,因为由于这些 CORS 问题,我无法进入我的 web api。
那么任何人都可以看到可能是什么问题吗?
编辑:在这里您可以在服务器 500 错误之前查看 Chrome 开发工具中的响应/请求标头:
这是我在 500 服务器错误后看到的内容:
【问题讨论】:
也许this 的问题会帮助您更好地了解 CORS 的工作原理。 【参考方案1】:我认为您需要在 app.UseMvc() 行代码之前提及 app.UseCors(),根据 this 博客文章。
准确地说:
services.AddCors(feature =>
feature.AddPolicy(
"GlobalCorsPolicy",
builder => builder
.SetIsOriginAllowed((host) => true)
.AllowAnyHeader()
.AllowAnyMethod()
.AllowAnyOrigin()
.AllowCredentials()
);
);
除此之外,这条线确实付出了巨大的代价。
.SetIsOriginAllowed((host) => true)
然后,您必须将控制器中的 EnableCors("GlobalCorsPolicy")] 显式设置为装饰属性。 如果我们在全球范围内添加,为什么要添加存在讨论和争论,但我的解决方案实际上解决了这个问题。
并且在不添加任何浏览器 Allow-Control-Allow-Origin 插件的情况下,如果您在代码中添加这些插件,它应该可以工作。
经过彻底的地狱般的尝试,我能够通过。
This 的帖子也帮助了我。我相信如果您按照这些步骤进行操作,并且您自己进行少量迭代以学习/了解 CORS 的工作原理以及在 .net 核心中的使用,这将得到解决。它肯定不同于 .net web api (fx) 中的简单程度。
【讨论】:
【参考方案2】:你需要安装一个nuget包:“Microsoft.AspNet.WebApi.Cors”, 并将其添加到类启动中:
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)
services.AddMvc();
services.AddCors(options => options.AddPolicy("AllowAll", builder =>
builder.AllowAnyOrigin();
builder.AllowAnyHeader();
builder.AllowAnyMethod();
builder.AllowCredentials();
));
// 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();
app.UseCors("AllowAll"); //<===
app.UseMvc();
添加到你的控制器
[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
在您的标题中(角度):
const httpOptions =
headers: new HttpHeaders(
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type, Origin , Access-Control-* , X-Requested-With, Accept',
'Content-Type': 'application/json,charset=utf-8',
'Accept': 'application/json',
'Allow' : 'GET, POST, PUT, DELETE, OPTIONS, HEAD'
)
;
最后在浏览器中安装 Allow-Control-Allow-Origin
【讨论】:
我的英语水平很低,因为我来自墨西哥以上是关于.NET Core 2 Web API:CORS 问题的主要内容,如果未能解决你的问题,请参考以下文章
仅在一个 .Net Core 2.0 Web API 控制器上出现 CORS 错误
本地 Javascript Fetch Post 请求失败,调用 ASP.NET Core 2.2 Web API。 CORS 已启用
如何让 CORS 与 ASP.Net Core Web API 服务器 Angular 2 客户端一起工作
无法在.net core 3.1 web api中找出CORS