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

Posted 2023-03-04

【中文标题】Angular / .net核心webapi应用程序中的CORS问题[关闭]

【英文标题】：CORS Problem in an Angular/.net core webapi application [closed]

【发布时间】：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 有什么不同的方法吗？

【参考方案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");

【讨论】：

非常感谢。这是错字。

不客气