web-dev-qa-db-fra.com

L'en-tête 'Access-Control-Allow-Origin' a une valeur 'http: // localhost: 4200' différente de l'origine fournie.

(suite du message d'erreur dans le titre) "L'accès à l'origine" http://127.0.0.1:4200 "n'est donc pas autorisé."

Je ne parviens pas à exécuter le même site Angular 5 sur deux domaines différents lorsque je travaille avec la même API.

Ce message d'erreur provient de Chrome. L'erreur dans Firefox est:

Demande d'origine croisée bloquée: la règle de même origine interdit la lecture de la ressource distante à http: //myapitest.local/v1/subscription/current/products . (Raison: l'en-tête CORS "Accès-Contrôle-Autoriser-Origine" ne correspond pas à " http://127.0.0.1:4200 ')

J'ai remarqué cela lorsque je travaillais sur une version de notre application Angular libellée en blanc qui sera exécutée sur une autre URL de notre application classique, tout en utilisant le même api Laravel s'exécutant sur la même URL. J'ai ajouté la configuration CORS appropriée à Laravel, cela semble être un problème de navigateur - vous ne savez pas comment le contourner.

Je l'ai recréé à localhost en passant de localhost: 4200 à 127.0.0.1:4200 par exemple.

Bizarrement, le preflight semble avoir du succès avec des en-têtes CORS corrects .  enter image description here

Cependant, sur le GET, il semble revenir avec l'en-tête WRONG Access-Control-Allow-Origin sur la réponse.
 enter image description here

Il est à noter ici que modifier mon origine autorisée dans l'API pour autoriser tout ('*') ne résout pas ce problème.

Je ne suis pas sûr des autres informations ou du code que je pourrais fournir pour rendre cela plus clair. Merci.

angularlaravelsecuritycors
11
QuietSeditionist

Supposons que votre api fonctionne sur 8080 et votre code angulaire sur 4200.

Dans votre application angulaire, créez un fichier nommé proxy.conf.json.

{
    "/api/": {
        "target": "http://localhost:8080/",
        "secure": false,
        "changeOrigin": true
    }
}

Lancer l'application angulaire à l'aide de cette commande

ng serve --port 4200 --proxy-config proxy.conf.json

Avec cette configuration lorsque vous appelez localhost: 4200/api, il appellera le 8080 et il n’aura aucune erreur CORS

4
Mesut Gölcük

Vous pouvez définir un proxy pour la requête fournie par le serveur de développement de webpack angulaire. En utilisant le proxy, vous pouvez modifier l'URL du serveur d'origine à partir de l'URL hébergée du domaine angular. Ceci sera réalisé par --proxy-config dans votre commande serve ou package.json. de sorte que angular sera exécuté dans différentes adresses URL avec le même service backend. 

ajoutez un fichier nommé proxy.conf.json près du package.json. depuis votre demande, obtenez l'URL ajouter/proxy

Dans votre fichier proxy.conf, ajoutez ceci 

{
  "/proxy": {
  "target": "http://localhost:3000",
  "secure": false,
  "pathRewrite": {
  "^/proxy": ""
 }
}

changez votre commande de service en tant que 

ng serve --proxy-config proxy.conf.json --port 4200 --Host 0.0.0.0

ou

dans votre angular.json changer la cible du service 

"architect": {
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "your-application-name:build",
    "proxyConfig": "proxy.conf.json"
 },

Remarque: veillez à ajouter/proxy dans la configuration de votre URL de service HTTP et de votre proxy uniquement à des fins de développement.

Pour l'environnement de production Vous devez configurer les serveurs Web.

0
esakki

Le problème est dans le mappage de nom. Comme un pool de serveurs peut avoir plusieurs adresses IP, la plupart des navigateurs associent l'adresse IP à un nom. Cela se fait normalement via le nom DNS demandé. Dans votre cas, il n’ya pas de nom, donc il cherche l’adresse IP dans le fichier hosts (/ etc/hosts sous Linux ou C:\Windows\System32\Drivers\etc\Hosts sous Windows) et renvoie le nom. De là.

Etant donné que vous devez tester plusieurs domaines (agissez en tant que deux serveurs distincts), ajoutez une ligne à votre fichier hosts pointant myapitest.local sur 127.0.0.2. Et une ligne myapitest2.local à 127.0.0.3. Cela permettra à votre dénomination locale de correspondre aux adresses IP et à la configuration appropriée (en spécifiant une adresse d'écoute spécifique à associer, pour chaque instance de serveur), chaque instance de serveur peut ensuite être exécutée sur le port 80.

Utilisez des noms dans toutes les demandes et autorisations Cross Origin.

Modifier

Le caractère générique ne fonctionne pas à cause de Access-Control-Allow-Credentials: true.

Sur le serveur dev-api.ourdomain.com: Ajoutez un En-tête de réponse au fichier de route Routes/api.php qui construit l'en-tête Access-Control-Allow-Origin: pour les domaines approuvés. Vous pouvez également appliquer cela en tant que middleware, mais pour des raisons de simplicité, je vais vous présenter des itinéraires simples. Cela doit également être fait pour les routes de contrôle en amont.

Route::get('/method/{id}', function (Request $request, $id) {
    $retval = method($id);
    $Origin_allowed = $request->header('HTTP_Origin');
    $allowed = array("dev.ourdomain.com", "dev.alternatedomain.com");
    if(in_array($Origin_domain, $allowed))
        return ($retval)->header('Access-Control-Allow-Origin:',$Origin_domain);
    else 
        return "Unauthorized";
});

Ceci est juste un exemple de code pour illustrer le concept.

Assurez-vous de supprimer les autorisations HTTP et les jetons Csrf lors de la déconnexion.

0
Strom

Configurez un serveur proxy inverse et configurez les chemins d'accès pour les deux domaines.
Nginx Guide

Cela vous permettra d'accéder à tout via http: // localhost/
Assumons:
A -> Application angulaire (localhost: 4200)
B -> Votre autre API de domaine (myapitest.local) 

Exemple de flux:
- Requête de navigateur ( http: // localhost/angular ) -> Nginx -> A
- Charger données depuis le backend -> Nginx -> B 

Donc, avec l'aide de Nginx, vous pourrez accéder à "A" depuis http: // localhost/ Et "B" également depuis http: // localhost/
Puisque l'origine est la même, il n'y aura pas d'erreur CORS.

0
Saddam Pojee