J'exécute le backend et le frontend sur un port différent (8000,8001), je ne peux pas faire res.redirect (...) à partir du serveur express et le navigateur affiche une erreur CORS (accès à XMLHttpRequest à ...)
Ceci est l'application MEVN (Mongo, Express, Vue, Nodejs), le frontend Vue et le backend express (nodejs) s'exécutent sur un port différent. J'ai implémenté cors () sur le backend et cela permet à mon frontend de faire des requêtes (get, post) mais le backend ne peut toujours pas rediriger la page frontend, en utilisant res.redirect ("...") car il montre CORS Erreur.
// Backend
var cors = require('cors');
app.use(cors())
...
function (req, res, next){ // some middleware on backend
...
res.redirect('http://urltofrontend'); // cause error
// Error msg on Chrome
Access to XMLHttpRequest at 'http://localhost:8001/' (redirected from
'http://localhost:8000/api/login') from origin 'null' has been blocked
by CORS policy: Request header field content-type is not allowed by
Access-Control-Allow-Headers in preflight response.
J'ai déjà implémenté cors () et cela permet à mon frontend de faire une requête http à mon backend et cela fonctionne bien. Cependant, res.redirect (...) du backend est bloqué par une erreur CORS.
4 Réponses :
Pour résoudre l'erreur CORS dans le navigateur, vous devez ajouter l'en-tête HTTP suivant à la réponse:
app.use(cors({
'allowedHeaders': ['Content-Type'],
'origin': '*',
'preflightContinue': true
}));
Vous pouvez le faire en ajoutant le code suivant:
Access-Control-Allow-Headers: Content-Type
cors () est déjà activé côté serveur et il permet à mon frontend de faire une requête api html. Je pensais que ça faisait le travail. maintenant la chose est que CORS empêche mon serveur de rediriger mon frontend .. mettrait l'aide d'en-tête? parce que le frontend veut bloquer la redirection depuis une source différente, et puis-je contourner cela en ajoutant un en-tête du côté serveur?
CORS devient totalement dénué de sens si tel est le cas.
J'ai modifié la réponse avec l'extrait de code que vous devez ajouter pour résoudre le problème. Commençons par ceci et voyons s'il y a une erreur supplémentaire
Merci pour votre réponse rapide. J'ai appliqué le code mais il ne s'est rien passé. Il a toujours le même message d'erreur.
hmm peut-être essayer d'ajouter PreflightContinue: true (ajouté à la réponse)
Peut-être parce que j'ai 2 serveurs en cours d'exécution pour chaque backend et frontend?
utiliser un middleware CORS comme
var enableCORS = function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, token, Content-Length, X-Requested-With, *');
if ('OPTIONS' === req.method) {
res.sendStatus(200);
} else {
next();
}
};
app.all("/*", function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, token, Content-Length, X-Requested-With, *');
next();
});
app.use(enableCORS);
Juste mes deux cents ...
Si vous traitez avec des appels d'authentification et que vous utilisez des cookies pour cela, vous devez configurer CORS. Et pour cela il faut remebmer:
AllowedOrigin allowCredentials sur true . AllowedOrigin (encore une fois, si vous avez affaire à des cookies / authentification). Utilisez protocole , hôte ET port [Pourquoi] . Un exemple de Golang (utilisant gorilla / handlers):
handlers.CORS(
// allowCredentials = true
handlers.AllowCredentials(),
// Not using TLS, localhost, port 8080
handlers.AllowedOrigins([]string{"http://localhost:8080"}),
handlers.AllowedMethods([]string{"GET", "POST", "PUT", "HEAD", "OPTIONS"}),
handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization"}),
)
J'ai donc eu ce problème avec le backend et le frontend sur différents ports et en bloquant les requêtes mutuelles.
La solution qui a fonctionné pour moi est la CONFIGURATION du proxy frontend vers le backend: Article moyen .
À faire: ajoutez "proxy": sur le package.json du dossier frontal.
Je n'ai pas vraiment trouvé de réponse à ce problème pendant plusieurs jours, ils vont être déployés dans des ports séparés, donc la fusion n'est pas une option. Ce sera d'une grande aide si quelqu'un me donne des conseils! Je vous remercie!