使用 Asp.net Core Webpi 的 Angular 应用程序中出现 CORS 错误

Question

我接到一项任务，要构建一个与以下 API 交互的 Web 客户端：

https://docs.openaq.org/

它应该能够向API发送不同的参数，并以友好的方式显示给定城市的空气质量结果。 我选择在 Asp.net core 中构建一个 Angular 项目。

program.cs中的代码

var builder = WebApplication.CreateBuilder(args);
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";


// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddCors(options =>
{

options.AddPolicy(name: MyAllowSpecificOrigins,
  policy =>
  {
    policy.WithOrigins("http://localhost:4200")
          .AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();                                      
   );
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI(options =>
{
    options.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
});
}

app.UseCors(MyAllowSpecificOrigins);

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

app.Component.ts代码：

import { HttpClient } from '@angular/common/http';
import { error } from '@angular/compiler/src/util';
import { OnInit } from '@angular/core';
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'OpenAQ Application';
pings: any;
readonly ROOT_URL = "https://docs.openaq.org"

posts:any

constructor(private http: HttpClient) { }


async ngOnInit(): Promise<void> {
await this.http.get(this.ROOT_URL + '/ping').subscribe(response => {
  this.pings = response;
}, error => {
  console.log(error);
 });
 }
}

启动我的 Angular 项目后收到错误。

从源“http://localhost:4200”访问“https://docs.openaq.org/ping”的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头请求的资源。

有谁知道为什么会出现这种情况？

Answer 1

发生这种情况是因为浏览器使用同源策略，因此它们会阻止来自与您的请求来源不同的来源（域）的服务器的响应。

这通常可以通过从服务器发送

Access-Control-Allow-Origin

标头作为响应来解决，但在这种情况下，我看到您正在使用第 3 方 API，我猜您将无法控制修改。由于您有自己的后端，您可以将此请求发送到您的后端，后端可以发出此第 3 方请求，检索响应并将其发送回浏览器。

无法从客户端解决 CORS 错误，但可以在开发环境中使用诸如代理之类的方法。我对 Angular 不太熟悉，但我发现这篇文章可以帮助你：https://www.stackhawk.com/blog/angular-cors-guide-examples-and-how-to-enable-it/

Answer 2

只需将其添加到您的 Program.cs 中即可：

 builder.Services.AddCors(options =>
{
    options.AddPolicy(name:"FrontEndUI", policy =>
    {
        policy.WithOrigins("http://localhost:4200/").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin();
    });
});

之前

var app = builder.Build();

此后在同一个文件中使用您创建的cors

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseCors("FrontEndUI"); // Use HERE

app.UseHttpsRedirection();