Erreur CORS: le champ d'en-tête de demande L'autorisation n'est pas autorisée par Access-Control-Allow-Headers dans la réponse de contrôle en amont

Question

Je suis en train d'envoyer la demande de l'une localhost port à l'autre. Je suis en utilisant angularjs sur le frontend et le nœud sur le backend.

Car il est de la SCRO demande, Dans node.js je suis à l'aide de

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');

et dans le angular.js le fichier de service, je suis en utilisant

return {
    getValues: $resource(endpoint + '/admin/getvalues', null, {
        'get': {
             method: 'GET',
             headers:{'Authorization':'Bearer'+' '+ $localStorage.token}
             }
     }),
}

J'obtiens l'erreur suivante

Demande de champ d'en-tête d'Autorisation n'est pas autorisé par Access-Control-Allow-les en-Têtes de contrôle en amont de la réponse.

S'il vous plaît aider!

Answer 1

C'est une API de problème, vous n'obtiendrez pas cette erreur si vous utilisez Postier/Voltigeur pour envoyer des requêtes HTTP à l'API. Dans le cas des navigateurs, pour des raisons de sécurité, ils envoient toujours des OPTIONS de demande/contrôle en amont de l'API avant d'envoyer le des requêtes (GET/POST/PUT/DELETE). Par conséquent, dans le cas où, à la demande de la méthode est la possibilité, non pas seuls, vous devez ajouter "Autorisation" dans "Access-Control-Allow-les en-Têtes", mais vous avez besoin d'ajouter des "OPTIONS" dans "Access-Control-allow-méthodes" ainsi. C'était la façon dont je le fixe:

if (context.Request.Method == "OPTIONS")
        {
            context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] });
            context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" });
            context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" });
            context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" });

        }

Answer 2

Vous devez ajouter des options également autorisés dans les en-têtes. le navigateur envoie une demande de contrôle en amont avant de l'original de la demande est envoyée. Voir ci-dessous

 res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');

À partir de la source https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

Dans la SCRO, un contrôle en amont de la requête avec la méthode des OPTIONS est envoyé, de sorte que le serveur peut répondre qu'il est acceptable d'envoyer la demande avec ces paramètres. L' Access-Control-Request-Method - tête informe le serveur dans le cadre d'un contrôle en amont de la demande que lorsque la demande est envoyée, elle sera envoyée avec un POST qui demande de la méthode. L' Access-Control-Request-Headers - tête informe le serveur que lorsque la demande est envoyée, elle sera envoyée avec un X-PINGOTHER et Content-Type - têtes personnalisés. Le serveur a maintenant la possibilité de déterminer s'il souhaite accepter une demande en vertu de ces circonstances.

ÉDITÉ

Vous pouvez éviter ce manuel de configuration en utilisant npmjs.com/package/cors package npm.J'ai utilisé cette méthode, il est clair et facile.

Answer 3

Le res.header('Access-Control-Allow-Origin', '*'); ne fonctionnerait pas avec l'en-tête Autorisation. Activez simplement la demande de pré-vol, en utilisant la bibliothèque cors :

 var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.options('*', cors())
 

Answer 4

Si vous ne souhaitez pas installer la bibliothèque cors et que vous souhaitez corriger votre code d'origine, l'autre étape qui vous manque est que Access-Control-Allow-Origin: * est incorrect. Lorsque vous passez des jetons d'authentification (par exemple JWT), vous devez indiquer explicitement chaque URL qui appelle votre serveur. Vous ne pouvez pas utiliser "*" lorsque vous effectuez des jetons d'authentification.

Answer 5

Vous devez d'abord installer cors en utilisant la commande ci-dessous:

 npm install cors --save
 

Ajoutez maintenant le code suivant au fichier de démarrage de votre application comme ( app.js or server.js )

 var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);