(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 .
Cependant, sur le GET, il semble revenir avec l'en-tête WRONG Access-Control-Allow-Origin sur la réponse.
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.
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
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.
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.
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.