Porównaj ceny domen i usług IT, sprzedawców z całego świata

Jak skonfigurować Angular 6 z .NET Core 2, aby zezwolić na CORS z dowolnego hosta?


Mam prostą aplikację Angular działającą lokalnie na 4200. Testuję za pomocą internetowego interfejsu API działającego lokalnie na 5000 przy użyciu .net core. Mój startup.cs ma poprawnie skonfigurowany CORS, aby zezwalać na wszystko, w co wierzę.
W sekcji ConfigureServices mam:
services.AddCors ();
W sekcji Ustawienia mam:
app.UseCors(options => options.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin());
Jednak kiedy próbuję wejść do mojego webapi, nadal widzę to w przeglądarce.

ze źródła ”

http://localhost:4200
http://localhost:4200
'został zablokowany przez politykę CORS: odpowiedź na żądanie przed lotem nie przechodzi kontroli kontroli dostępu: przekierowanie nie jest dozwolone dla żądania przed lotem.

Spojrzałem na inne odpowiedzi i wydaje się, że wszystkie mają tę lub podobne odmiany, których wypróbowałem bez żadnych zmian. Nie wiesz, co jeszcze muszę zrobić?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


możliwe problemy:
>
  • W Twojej metodzie
    startup.cs.Configure ()
    to
    app.UseCors ()
    poprzedzone przez
    app.useMVC ()
  • Czy żądanie adresu URL HTTP zawiera końcowe
    (/)
  • Tutaj Http request czy będziesz mieć również uprawnienia
  • Czy przeglądarka otrzymuje odpowiedź HTTP z interfejsu API
  • Czy odpowiedź zawiera nagłówek „Access-Control-Allow-Origin”
  • Kiedy wysyłasz żądanie od Postmana, czy odpowiedź HTTP zawiera nagłówek „Access-Control-Allow-Origin” oraz treść zawierającą dane


Podwodne kamienie
>
Firefox wymaga zainstalowania certyfikatu dla twojego API, aby wysłać żądanie HTTP przy użyciu protokołu HTTPS.
Przetestuj swój interfejs API za pomocą programu Postman i narzędzia deweloperskiego przeglądarki. Uwaga 2 żądania HTTP. Http 200 jest „przed lotem”, aby zobaczyć, jakie opcje CORS są dostępne.
  • Jeśli Twój interfejs API (.NET) zgłosi
    HTTP 500 (wewnętrzny błąd serwera)
    , zwróci stronę wyjątków dla programistów, a Postman wyświetli komunikat
    „brak nagłówka„ Access-Control-Allow-Origin ” jest obecny w żądanym zasobie ”
    - to nie jest właściwe .
  • Rzeczywisty problem w tym przypadku polega na tym, że strona wyjątków programisty nie może zostać zwrócona z serwera do klienta (przeglądarki) działającego w innym źródle.


Chciałbym z

szacunek

zwróć uwagę na następujące kwestie:
>
  • Specyfikacja CORS stwierdza, że ​​ustawienie początków na „*” (wszystkie źródła) jest nieprawidłowe, jeśli obecny jest nagłówek Access-Control-Allow-Credentials.
  • AllowAnyOrigin ()
    jest przestarzałe w środowisku produkcyjnym, chyba że zamierzasz zezwolić komuś innemu na używanie swojego interfejsu API i wdrażasz poświadczenia.
  • Nie musisz konfigurować CORS na poziomie kontrolera z atrybutem
    EnableCors
    , gdy używasz wielu zasad CORS.
  • Konfigurowanie wielu zasad CORS za pomocą ASP.NET core jest łatwe ( zobacz poradnik poniżej )


Warto rozważyć następujące artykuły:
>
ASP.NET Core 2.2 nie zezwala na poświadczenia z AllowAnyOrigin ()
https://docs.microsoft.com/en- ... tudio
Włącz żądania krzyżowe (CORS) w jądrze
https://docs.microsoft.com/en- ... e-2.2
ASP.NET

kluczowe punkty (tldr;):
>
  • Oprogramowanie pośredniczące CORS musi poprzedzać wszystkie określone punkty końcowe w konfiguracji aplikacji.
  • Adres URL należy podać bez ukośnik kończący
    (/)
    .
  • Jeśli przeglądarka wysyła poświadczenia, ale odpowiedź nie zawiera dopuszczalny Access-Control-Allow-Credentials, przeglądarka tego nie robi zapewnia odpowiedź do aplikacji, a żądanie między źródłami kończy się niepowodzeniem.
  • Specyfikacja CORS stwierdza również, że ustawienie źródeł na „*” (all oryginalne dane) jest nieprawidłowy, jeśli obecny jest nagłówek Access-Control-Allow-Credentials.
  • Jeśli przeglądarka obsługuje CORS, automatycznie ustawia te nagłówki dla żądań między źródłami.
  • Jeśli odpowiedź nie zawiera nagłówka Access-Control-Allow-Origin, żądanie między źródłami kończy się niepowodzeniem.


Samouczek CORS: (2) Klienci kątowi + ASP.NET Core
>
  • Utwórz rozwiązanie Visual Studio md c:\s\acd c:\s\ac:\s\a>dotnet new sln -n solutionName
  • Tworzenie podstawowego projektu ASP.NET c:\s\a>md sc:\s\a>cd sc:\s\a\s>dotnet new webapi -o api -n api
  • Parametry uruchamiania API i konfiguracja CORS


launchSettings.json
Klonowanie profilu deweloperskiego do profilu przejściowego

{
"$schema": "[url=http://json.schemastore.org/launchsettings.json"]http://json.schemastore.org/la ... ot%3B[/url],
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iis": {
"applicationUrl": "[url=http://localhost:myIISApiPortNumber"]http://localhost:myIISApiPortNumber"[/url],
"sslPort": myIISApiSSLPortNumber
},
"iisExpress": {
"applicationUrl": "[url=http://localhost:myIISExpressApiPortNumber"]http://localhost:myIISExpressApiPortNumber"[/url],
"sslPort": myIISExpressApiSSLPortNumber
}
},
"profiles": {
"Development (IIS Express)": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "api/values",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"Staging (IIS Express)": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "api/values",
"applicationUrl": "[url=https://localhost:myIISExpressApiSSLPortNumber;http://localhost:myIISExpressApiPortNumber"]https://localhost:myIISExpress ... ot%3B[/url],
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Staging"
}
},
"Production (IIS)": {
"commandName": "IIS",
"launchBrowser": true,
"launchUrl": "api/values",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Production"
},
"applicationUrl": "https:localhost:myIISApiSSLPortNumber;[url=http://localhost:myIISApiPortNumber"]http://localhost:myIISApiPortNumber"[/url]
}
}
}


startup.cs
Dodaj konfigurację CORS

public class Startup
{
public IConfiguration Configuration { get; } public IServiceCollection _services { get; private set; } public Startup(IConfiguration configuration)
{
Configuration = configuration;
} public void ConfigureServices(IServiceCollection services)
{
_services = services;
RegisterCorsPolicies();
services.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
} public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseCors("DevelopmentCorsPolicy");
app.UseDeveloperExceptionPage();
}
else if (env.IsStaging())
{
app.UseCors("StagingCorsPolicy");
}
else
{
app.UseCors("ProductionCorsPolicy");
app.UseHsts();
} app.UseHttpsRedirection();
app.UseMvc();// CORS middleware must precede any defined endpoints
} private void RegisterCorsPolicies()
{
string[] localHostOrigins = new string[] {
"[url=http://localhost:4200"]http://localhost:4200"[/url], "[url=http://localhost:3200"]http://localhost:3200"[/url]}; string[] stagingHostOrigins= new string[] {
"[url=http://localhost:4200"]http://localhost:4200"[/url]}; string[] productionHostOrigins = new string[] {
"[url=http://yourdomain.net"]http://yourdomain.net"[/url], "[url=http://www.yourdomain.net"]http://www.yourdomain.net"[/url],
"[url=https://yourdomain.net"]https://yourdomain.net"[/url], "[url=https://www.yourdomain.net"]https://www.yourdomain.net"[/url]}; _services.AddCors(options =>// CORS middleware must precede any defined endpoints
{
options.AddPolicy("DevelopmentCorsPolicy", builder =>
{
builder.WithOrigins(localHostOrigins)
.AllowAnyHeader().AllowAnyMethod();
});
options.AddPolicy("StagingCorsPolicy", builder =>
{
builder.WithOrigins(stagingHostOrigins)
.AllowAnyHeader().AllowAnyMethod();
});
options.AddPolicy("ProductionCorsPolicy", builder =>
{
builder.WithOrigins(productionHostOrigins)
.AllowAnyHeader().AllowAnyMethod();
});
//options.AddPolicy("AllowAllOrigins",
// builder =>
// {
// WARNING: ASP.NET Core 2.2 does not permit allowing credentials with AllowAnyOrigin()
// cref: [url=https://docs.microsoft.com/en-us/aspnet/core/migration/21-to-22?view=aspnetcore-2.2&tabs=visual-studio]https://docs.microsoft.com/en- ... tudio[/url]
// builder.AllowAnyOrigin()
// .AllowAnyHeader().AllowAnyMethod();
// });
//options.AddPolicy("AllowSpecificMethods",
// builder =>
// {
// builder.WithOrigins(productionHostOrigins)
// .WithMethods("GET", "POST", "HEAD");
// });
//options.AddPolicy("AllowSpecificHeaders",
// builder =>
// {
// builder.WithOrigins(productionHostOrigins)
// .WithHeaders("accept", "content-type", "origin", "x-custom-header");
// });
//options.AddPolicy("ExposeResponseHeaders",
// builder =>
// {
// builder.WithOrigins(productionHostOrigins)
// .WithExposedHeaders("x-custom-header");
// });
//options.AddPolicy("AllowCredentials",
// WARNING: ASP.NET Core 2.2 does not permit allowing credentials with AllowAnyOrigin() cref: [url=https://docs.microsoft.com/en-us/aspnet/core/migration/21-to-22?view=aspnetcore-2.2&tabs=visual-studio]https://docs.microsoft.com/en- ... tudio[/url]
// builder =>
// {
// builder.WithOrigins(productionHostOrigins)
// .AllowCredentials();
// });
//options.AddPolicy("SetPreflightExpiration",
// builder =>
// {
// builder.WithOrigins(productionHostOrigins)
// .SetPreflightMaxAge(TimeSpan.FromSeconds(2520));
// });
});
}
}

<ol start="4">
[*]
Uruchom interfejs API debugowania za pomocą

Profil deweloperski (IIS Express)

[/*]
[/list]

Ustaw punkt przerwania w
ValuesController.Get ()

<ol start="5">
[*]
Testuj API z Postmanem:
[url=https://localhost:myApiPortNumber/api/values]https://localhost:myApiPortNumber/api/values[/url]
  • Access-Control-Allow-Origin nagłówek i wartości muszą znajdować się w odpowiedzi

[/*]
[*]
Utwórz aplikację Angular

c:\s\a\s>ng new Spa1 --routing (will automatically create Spa folder)[/*]
[*]
Uruchom aplikację Spa1

c:\s\a\s>cd Spa1
c:\s\a\s\Spa1>Ng serve[/*]
[*]
Odnaleźć

http://localhost:4200
http://localhost:4200/
/
  • Spa1 powinno rozpocząć się pomyślnie

[/*]
[*]
Wdrożenie COR w Spa1
[/*]
[/list]

app.module.ts
  • Importowanie HttpClientModule
import { HttpClientModule } from '@angular/common/http';import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts
  • Importowanie HttpClient
  • Dodaj metodę
    getValues ​​()
    z żądaniem CORS
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})export class AppComponent implements OnInit {
title = 'Spa1';
values: any;
apiUrl: string = environment.apiUrl;
valuesUrl = this.apiUrl + "values"; constructor(private http: HttpClient) { } ngOnInit() {
this.getValues();
}
getValues() {
this.http.get(this.valuesUrl).subscribe(response => {
this.values = response;
}, error => {
console.log(error);
});
}
}


app.component.html

<div style="text-align:center">
[b]
Welcome to {{ title }}!
[/b]>[b]Values[/b]>
<p *ngFor="let value of values">
{{value}}
<router-outlet></router-outlet>


environment.ts

export const environment = {
production: false,
apiUrl: 'https://localhost:myApiPortNumber/api/'
};

<ol start="10">
[*]
Uruchom aplikację Spa1

c:\s\a\s\Spa1>Ng serve[/*]
[*]
Odnaleźć

http://localhost:4200
http://localhost:4200/
/
  • Chrome & amp; Edge: powinieneś teraz pomyślnie ukończyć COR żądań
  • Safari: jeszcze nie testowałem
  • Firefox: może blokować żądanie z powodu niezaufanego certyfikatu.

[/*]
[/list]
Jeden sposób na naprawienie blokady Firefoksa:

FireFox | Parametry | Prywatność i Bezpieczeństwo | Bezpieczeństwo | Certyfikaty |
[Zobacz certyfikaty]:
Menedżer certyfikatów | [Dodaj wyjątek]:
add localhost

Test CORS
>
  • Clone Spa1 c:\s\a\s>xcopy/s/i Spa1 Spa2
  • Refaktoryzacja nazwy Spa2


app.component.ts

export class AppComponent implements OnInit {
title = 'Spa2';
}

<ol start="3">
[*]
Uruchom aplikację Spa2 na

port 3200
c:\s\a\s\Spa2>ng serve --port 3200[/*]
[*]
Odnaleźć

http://localhost:3200
http://localhost:3200/
/
  • Tablica wartości powinna zostać wyświetlona na stronie internetowej

[/*]
[*]
Zatrzymaj debugowanie interfejsu API za pomocą profilu deweloperskiego (IIS Express)
[/*]
[*]
Uruchom interfejs API debugowania za pomocą

profil pośredni (IIS Express)

[/*]
[*]
Odnaleźć

http://localhost:4200
http://localhost:4200/
/
  • Tablica wartości powinien być wyświetlony na stronie internetowej.

[/*]
[*]
Odnaleźć

http://localhost:3200
http://localhost:3200/
/
  • Tablica wartości nie powinny być wyświetlane na stronie internetowej.

[/*]
[*]
sprawdź odpowiedź HTTP za pomocą narzędzi programistycznych:
  • Access-Control-Allow-Origin nagłówek i wartości nie powinny znajdować się w odpowiedzi

[/*]
[/list]
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Dodaj następujący fragment kodu do metody ConfigureServices. Edytuj to, aby zezwolić tylko na niestandardowe nagłówki.
// Add service and create Policy with options
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy",
builder => builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
);
});

Dodaj następujące elementy do metody Configure
app.UseCors("CorsPolicy");

Dodaj atrybut „EnableCors” do kontrolera.
[EnableCors("CorsPolicy")]
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zarejestruj się w serwisie cors
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy",
builder => builder
.SetIsOriginAllowed((host) => true)
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});

dodaj oprogramowanie pośredniczące firmy cors
app.UseCors("CorsPolicy");
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Miałem ten sam problem, ale w moim przypadku miałem

windowsauthentication

.
@RandyDaddis wskazał mi właściwy kierunek.
Nie możesz użyć znaku „*”, jeśli ustawiono uwierzytelnianie.
Ale to nie rozwiązuje problemu dziury (a dla mnie „*” nie jest zbyt dobrą opcją).
Musiałem przełączyć się z WindowsAuthentication

tylko

na

tryb mieszany

(gdzie jest również uwzględnione anonymousAuthentication), ponieważ

inspekcja wstępna
https://coderoad.ru/29954037/
obsługa administracyjna nie wysłała poświadczeń.
Ta kwestia została już omówiona

asp
https://github.com/aspnet/CORS/issues/60
.
Liczy się to, że dodasz to do swojego

startup.cs

w


ConfigureServices, aby upewnić się, że wszystkie kontrolery są nadal objęte zasadami autoryzacji:
...
services.AddAuthentication(IISDefaults.AuthenticationScheme);
services.AddMvc(options =>
{
var policy = new AuthorizationPolicyBuilder()
.RequireAuthenticatedUser()
.Build();
options.Filters.Add(new AuthorizeFilter(policy));
})...

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się