.NET Core 2 Web API：CORS 问题

Posted 2023-03-04

【中文标题】.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

【讨论】：

我的英语水平很低，因为我来自墨西哥