Comment activer Access-Control-Allow-Origin pour angular 5 / nodejs?

Lisez de nombreuses manières pour inclure «Access-Control-Allow-Origin» et aucune ne fonctionne pour moi.

J’utilise @ angular / common / module http et URL externe comme source de données. par la tentative d’obtenir des données à la place, obtenez l’erreur: ///// ……………..

Failed to load http://accounts.......com/accounts: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 503. 

account.service.ts:

 import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { HttpClient, HttpParams } from '@angular/common/http'; import { HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { Account } from '../models/account'; const baseUrl : ssortingng = 'http://accounts..................com/'; const httpOptions : any = { headers: new HttpHeaders({ //'Content-Type': 'application/json', 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Allow-Methods': 'GET', 'Access-Control-Allow-Origin': '*' }) }; @Injectable() export class AccountService { private isUserLoggedIn; private usreName; private account : Account; constructor( private http: HttpClient, private router: Router ) {} logIn (credentials: any): Observable { return this.http.get(baseUrl + 'accounts'); } } 

app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { routing } from './routing'; import { AppComponent } from './app.component'; import { AppGlobal } from './app.global'; import { AccountComponent } from './components/account/account.component'; @NgModule({ declarations : [ AppComponent, AccountComponent, .... ], imports : [ routing, BrowserModule, HttpClientModule, CookieModule.forRoot() ], providers : [AccountService, AppGlobal], bootstrap : [AppComponent] }) export class AppModule { } 

Aidez-moi, s’il vous plaît

//////////////// Solution essayée 1

 //...... import { HttpHeaders} from '@angular/common/http'; //....... logIn (credentials: any): Observable { const headers = new HttpHeaders() .append('Content-Type', 'application/json') .append('Access-Control-Allow-Headers', 'Content-Type') .append('Access-Control-Allow-Methods', 'GET') .append('Access-Control-Allow-Origin', '*'); return this.http.get(baseUrl + 'accounts', {headers}); } 

entrez la description de l'image ici

Je reçois toujours cette erreur:

La réponse à la demande de contrôle en amont ne réussit pas la vérification du contrôle d’access: aucun en-tête ‘Access-Control-Allow-Origin’ n’est présent sur la ressource demandée. Origin ‘ http: // localhost: 4200 ‘ n’est donc pas autorisé. La réponse avait le code d’état HTTP 503.

//////////////// Solution essayée 2

proxy.conf.json:

 { "/api": { "target": "http://localhost:4200", "secure": false, "pathRewrite": { "^/api": "" }, "changeOrigin": true, "logLevel": "debug" } } 

ng serve –proxy-config proxy.conf.json

aussi erreur

Origine CORS autorisée dans NodeJs / Express Js

=> Ajouter du code dans le fichier server.js ou le fichier courrier.

 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); 

CORS (partage de ressources d’origine croisée) est une fonctionnalité HTML5 qui permet à un site d’accéder aux ressources d’un autre site même s’il se trouve sous des noms de domaine différents.

La spécification W3C pour CORS fournit en fait quelques exemples simples d’en-têtes de réponse, tels que l’en-tête de clé, Access-Control-Allow-Origin et d’autres en-têtes que vous devez utiliser pour activer CORS sur votre serveur Web.

Si vous utilisez .NET Api, ajoutez-le à votre fichier WebApiConfig.cs.

  public static void Register(HttpConfiguration config) { var enableCorsAtsortingbute = new EnableCorsAtsortingbute("*", "Origin, Content-Type, Accept", "GET, PUT, POST, DELETE, OPTIONS"); config.EnableCors(enableCorsAtsortingbute); // Web API configuration and services // Configure Web API to use only bearer token authentication. config.SuppressDefaultHostAuthentication(); config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); // Web API routes config.MapHttpAtsortingbuteRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/v1/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } 
 Access-Control-Allow-Origin 

L’en-tête de réponse n’est-il pas l’en-tête de demande? Vous devez append cet en-tête à votre resfull (serveur)

Vous avez parlé de webpack-dev-server, qui peut bien entendu gérer CORS puisqu’il utilise express en coulisse. Dans votre config de webpack

 devServer: { headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" } },