.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

即使在配置 ASP.NET Core Web API 中启用了 CORS,CORS 也会阻止发布请求

无法在 ASP.Net Core Web api 中启用 CORS