j'ai créé une petite API en utilisant Node / Express et en essayant d'extraire des données en utilisant Angularjs mais comme ma page html fonctionne sous apache sur localhost: 8888 et que l'API du nœud est à l'écoute sur le port 3000, je reçois le No 'Access-Control- Autoriser l'origine ». J'ai essayé d'utiliser node-http-proxy
et Vhosts Apache mais sans grand succès, veuillez voir l'erreur complète et le code ci-dessous.
XMLHttpRequest ne peut pas charger localhost: 3000. Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L'origine 'localhost: 8888' n'est donc pas autorisée à accéder. "
// Api Using Node/Express
var express = require('express');
var app = express();
var contractors = [
{
"id": "1",
"name": "Joe Blogg",
"Weeks": 3,
"Photo": "1.png"
}
];
app.use(express.bodyParser());
app.get('/', function(req, res) {
res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')
Code angulaire
angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {
$http.get('localhost:3000').then(function(response) {
var data = response.data;
$scope.contractors = data;
})
HTML
<body ng-app="contractorsApp">
<div ng-controller="ContractorsCtrl">
<ul>
<li ng-repeat="person in contractors">{{person.name}}</li>
</ul>
</div>
</body>
La réponse acceptée est correcte, si vous préférez quelque chose de plus court, vous pouvez utiliser un plugin appelé cors disponible pour Express.js
C'est simple à utiliser, pour ce cas particulier:
la source
{origin: 'null'}
pour que ça marche ... Apparemment, mon navigateur envoienull
comme origine?app.use(cors({origin: '*'}));
travaillé pour moi, selon les enable-cors .Une autre façon consiste simplement à ajouter les en-têtes à votre itinéraire:
la source
)
de smiley m'a confonduLa meilleure réponse a bien fonctionné pour moi, sauf que je devais mettre en liste blanche plus d'un domaine.
De plus, la première réponse souffre du fait que la
OPTIONS
demande n'est pas gérée par le middleware et que vous ne l'obtenez pas automatiquement.Je stocke les domaines en liste blanche comme
allowed_origins
dans la configuration Express et je mets le domaine correct en fonction de l'en-origin
tête carAccess-Control-Allow-Origin
il ne permet pas de spécifier plus d'un domaine.Voici ce que j'ai fini avec:
la source
Le code de réponse ne permet qu'à localhost: 8888. Ce code ne peut pas être déployé sur la production ou sur un autre nom de serveur et de port.
Pour le faire fonctionner pour toutes les sources, utilisez plutôt ceci:
la source
Installez la dépendance cors dans votre projet:
Ajoutez à votre fichier de configuration de serveur les éléments suivants:
Cela fonctionne pour moi avec la version 2.8.4 cors.
la source
"cors": "^2.8.5", "express": "^4.16.3",
fonctionne très bien avec la ligne suggérée par @monikaja. Merci!Cela a fonctionné pour moi.
Vous pouvez modifier * pour répondre à vos besoins. J'espère que cela peut vous aider.
la source
Salut, cela se produit lorsque le frontal et le backend s'exécutent sur des ports différents. Le navigateur bloque les réponses du backend en raison de l'absence sur les en-têtes CORS. La solution est de faire ajouter les en-têtes CORS dans la requête backend. La manière la plus simple est d'utiliser le paquetage cors npm.
Cela permettra aux en-têtes CORS dans toutes vos demandes. Pour plus d'informations, vous pouvez vous référer à la documentation de cors
https://www.npmjs.com/package/cors
la source
la source
Ajoutez le code suivant dans app.js de NODEJ Restful api pour éviter l'erreur "Access-Control-Allow-Origin" dans angular 6 ou tout autre framework
la source
Vous pouvez utiliser "$ http.jsonp"
OU
Ci-dessous, le travail autour de Chrome pour les tests locaux
Vous devez ouvrir votre chrome avec la commande suivante. (Appuyez sur la fenêtre + R)
Remarque: votre chrome ne doit pas être ouvert. Lorsque vous exécutez cette commande, chrome s'ouvre automatiquement.
Si vous entrez cette commande dans l'invite de commande, sélectionnez votre répertoire d'installation de Chrome, puis utilisez cette commande.
Ci-dessous le code de script pour chrome ouvert dans MAC avec "--allow-file-access-from-files"
deuxième option
Vous pouvez simplement utiliser open (1) pour ajouter les drapeaux: open -a 'Google Chrome' --args --allow-file-access-from-files
la source
la source