Angular / .net核心webapi应用程序中的CORS问题[关闭]答案

【问题标题】：CORS Problem in an Angular/.net core webapi application [closed]Angular / .net核心webapi应用程序中的CORS问题[关闭]
【发布时间】：2020-03-30 06:18:15
【问题描述】：

我正在使用 Angular 8 和 .net core 3.0.1 尝试学习有关 Web 应用程序开发的知识。不幸的是，当我尝试将一些数据从我的 .net 核心 webapi 调用到 Angular 框架应用程序时，我遇到了一些问题。在浏览器控制台中，我收到有关 CORS 访问的错误。

从源“http://localhost:4200”访问“https://localhost:5001/api/user/pagewise/1/10”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我以为我已经在我的 webapi Startup.cs 中激活了 Cors：

...
public void ConfigureServices(IServiceCollection services)
       {   
           _connectionString ="XXX";

           services.AddCors( opt => 
               {
                   opt.AddPolicy("CorsPolicy",
                   c => c.AllowAnyOrigin()
                         .AllowAnyMethod()
                         .AllowAnyHeader());
               })
               ;
           services.AddControllers();
           services.AddEntityFrameworkNpgsql()
           .AddDbContext<ApiContext>(
               opt => opt.UseNpgsql(_connectionString));
       } 
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, DataSeed seed)
       {
           if (env.IsDevelopment())
           {
               app.UseCors("CorsePolice");
               app.UseDeveloperExceptionPage();

           }
           app.UseCors("CorsePolice");

           app.UseHttpsRedirection();

           app.UseRouting();

           app.UseAuthorization();

           app.UseEndpoints(endpoints =>
           {
               endpoints.MapControllers();
               endpoints.MapControllerRoute("default", "api/{controller}/{action}/{id?}");
               endpoints.MapControllers().RequireCors("CorsPolicy");
           });
  }

但它似乎不起作用。在 .net core 3.0.1 WebApi 中使用 Cors 有什么不同的方法吗？

【问题讨论】：

标签： angular cors asp.net-core-webapi

【解决方案1】：

您收到 CORS 错误的原因可能有很多：- 1.从角度侧向API的请求中使用适当的标头 2. 可能是您不允许来自后端的 CORS

解决使用：- 1.在角度使用allow-cross-origin 2.尝试在chrome浏览器中使用cors插件我猜你的问题会解决。

另外，尝试通过邮递员使用API，它会确定哪一方是问题

这些是我遇到的一些问题以及我解决的方法。我不确定它是否会帮助您，但尝试一下可能会有所帮助。

【讨论】：

感谢您的回答。如果使用 Postman，请求确实有效。我还尝试了 Firefox 中的“允许 CORS”插件。它确实使请求起作用。但是即使没有安装这样的插件，请求也不应该在所有情况下运行吗？另外我不知道如何添加“允许跨域的角度”。
您是否尝试在 Angular 中添加和删除标题？
httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'my-auth-token', 'Access-Control-Allow-Origin' : '*', '允许': 'GET, POST, PUT, DELETE', }) };
return this.http .post(url,body, { headers: this.httpOptions.headers });
感谢您的帮助。事实上，错误是 CorsPolic(y,e) 中的一个错字

【解决方案2】：

似乎你在opt.AddPolicy() 中使用了CorsPolicy。但是您在app.UseCors() 中使用CorsePolice。所以使用app.UseCors("CorsPolicy");

【讨论】：

非常感谢。这是错字。
不客气