web-dev-qa-db-fra.com

L'application Angular 7 obtient une erreur CORS d'un client angulaire

J'ai développé une application angulaire 7 avec backend express. Express s'exécute sur localhost:3000 et le client angulaire s'exécute sur localhost: 4200.

Dans le server.js j'ai (pas le code entier)

const app = express();
// Enable CORS
app.use(cors());
// Get our API routes
const api = require('./api');
// Set our api routes
app.use('/api', api);
app.use(express.static(__dirname + '/dist/sfdc-event'));

Dans le fichier api.js, j’ai router.get ('/ oauth2/login') qui redirige vers https://example.com qui envoie un jeton d’accès et authentifie l’utilisateur (authentification OAuth2).

Lorsque j'appelle l'url http: // localhost: 3000/api/oauth2/login tout fonctionne correctement, mais lorsque j'essaie de faire la même chose à partir de composant angulaire.ts -> service.ts je reçois l'erreur suivante.

Demande d'origine croisée bloquée: la règle de même origine interdit la lecture la ressource distante Reason: en-tête CORS ‘Access-Control-Allow-Origin’ manquant

Le flux de l’application angulaire est comme suit login.component.ts qui a un bouton appelant un service api.service.ts qui exécute un http get.

login.component.ts

sfdcLogin(): void {
  console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
 this.apiService.login().subscribe( data => { console.log( data ); });
}

api.service.ts

login() {
  console.log('DEBUG: APiService login(): ', 'login() function.');
  const URL = 'oauth2/login';
  console.log('DEBUG: ApiService login URL : ', `${environment.baseUrl}/${URL}`.toString());
  return this.http.get(`${environment.baseUrl}/${URL}`)
    .pipe( map( res => res ));
}

Est-ce que quelqu'un peut m'aider à surmonter l'erreur? J'ai un CORS b) servant des fichiers statiques de server.js en tant que 

app.use(express.static(__dirname + '/dist/sfdc-event'));

c) variable d'environnement dynamique . Quoi d'autre me manque?

node.jsangularexpresscorsangular7
2
Arup Sarkar

Pour Angular 7, vous devez effectuer une autre implémentation. Dans la documentation angulaire, vous devez créer un fichier proxy.js:

https://angular.io/guide/build#using-corporate-proxy

Modifiez le chemin d'accès pour votre propre serveur principal.

proxy.js:

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://your-remote-server.com:3000',
  secure: false
}];

function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

Ajoutez ensuite ceci à votre package.json 

"start": "ng serve --proxy-config proxy.js"

Et appelez ceci avec:

npm start

Et dans votre app.js, ajoutez simplement:

const cors = require("cors");
app.use(cors());

J'ai eu le même problème et cela a résolu mon problème. J'espère que ça aide!

3
Freestyle09

Étant donné que votre application angulaire est exécutée sur un port 4200 et que le backend est exécuté sur un port 3000, l'origine de l'application est différente. 

Pour résoudre ce problème, vous pouvez configurer "nginx" sur votre ordinateur. 

Cela fera toutes vos demandes d'angular et backend, allez via le serveur "nginx". Ainsi, résoudre le problème de CORS.

0
Saddam Pojee

Si cela n’est que pour le développement, je vous recommande d’utiliser un proxy fourni avec angular-cli . Créez un fichier appelé proxy.json

et 

{
  "/api/oauth2/login": {
    "target": "http://localhost:3000/api/oauth2/login",
    "secure": false
  }
}

et l'appel ng serve --proxy-config proxy.json. Si vous vous attendez à ce que cela pose toujours un problème en production, nous devons avoir une conversation plus importante. 

Documentation complète: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Aussi ce qui est CORS exacly: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

0
piotr szybicki

J'ai modifié le mécanisme de rappel pour résoudre le problème de la SCRO. J'utilise un flux OAuth permettant à l'utilisateur de s'authentifier à partir de https://example.com qui redirigeait vers https://example.com/ auth/callback , je lançais la demande à partir de http: // localhost: 4200 puis envoyais l'URL de rappel au serveur http: // localhost: 3000 et j'obtenais l'erreur CORS .

Maintenant, je le redirige vers le client http: // localhost: 4200 et le problème CORS a été résolu. Tous les autres appels pour GET, POST, DELETE, PATCH proviennent du répertoire http: // localhost: 3000 qui fonctionne correctement.

Merci à tous pour vos commentaires.

0
Arup Sarkar