我接到一项任务,要构建一个与以下 API 交互的 Web 客户端:
它应该能够向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”标头请求的资源。
有谁知道为什么会出现这种情况?
发生这种情况是因为浏览器使用同源策略,因此它们会阻止来自与您的请求来源不同的来源(域)的服务器的响应。
这通常可以通过从服务器发送
Access-Control-Allow-Origin
标头作为响应来解决,但在这种情况下,我看到您正在使用第 3 方 API,我猜您将无法控制修改。由于您有自己的后端,您可以将此请求发送到您的后端,后端可以发出此第 3 方请求,检索响应并将其发送回浏览器。
无法从客户端解决 CORS 错误,但可以在开发环境中使用诸如代理之类的方法。我对 Angular 不太熟悉,但我发现这篇文章可以帮助你:https://www.stackhawk.com/blog/angular-cors-guide-examples-and-how-to-enable-it/
只需将其添加到您的 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();