web-dev-qa-db-fra.com

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

J'essaie d'envoyer la demande d'un port localhost à un autre. J'utilise angularjs sur le frontend et noeud sur le backend.

Comme il s'agit de CORS demande, dans node.js, j'utilise

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 fichier de service angular.js, j'utilise

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

Je reçois l'erreur suivante

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

S'il vous plaît aider!

javascriptangularjsnode.jshttp-headerscors
34
Abhishek Kulshrestha

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

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

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

Dans CORS, une demande de contrôle en amont avec la méthode OPTIONS est envoyée afin que le serveur puisse déterminer s’il est acceptable d’envoyer la demande avec ces paramètres. L'en-tête Access-Control-Request-Method informe le serveur dans le cadre d'une demande de contrôle en amont que, lorsque la demande réelle est envoyée, il est envoyé avec une méthode de demande POST. L'en-tête Access-Control-Request-Headers indique au serveur que, lorsque la demande est envoyée, elle sera envoyée avec les en-têtes personnalisés X-PINGOTHER et Content-Type. Le serveur a maintenant la possibilité de déterminer s'il souhaite accepter une demande dans ces circonstances.

ÉDITÉ

Vous pouvez éviter cette configuration manuelle en utilisant npmjs.com/package/cors package npm.J'ai utilisé cette méthode également, elle est claire et simple.

27
vikas

Il s'agit d'un problème d'API. Vous n'obtiendrez pas cette erreur si vous utilisez Postman/Fielder pour envoyer des requêtes HTTP à l'API. Dans le cas des navigateurs, pour des raisons de sécurité, ils envoient toujours une requête/preflight OPTIONS à l'API avant d'envoyer les requêtes réelles (GET/POST/PUT/DELETE). Par conséquent, dans le cas où la méthode de requête est OPTION, vous devez non seulement ajouter "Autorisation" dans "Accès-Contrôle-Autoriser-en-têtes", mais également "OPTIONS" dans "Accès-Contrôle-autoriser-méthodes". bien. Voici comment j'ai corrigé:

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" });

        }
23
Hung Vu

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

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

Pour tous ceux qui l'obtiennent en utilisant le backend ServiceStack; Ajouter "Autorisation" aux en-têtes autorisés dans le plugin Cors :

Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type,Authorization"));

2
user1713059

D'abord vous devez installercors en utilisant la commande ci-dessous:

npm install cors --save

Maintenant ajoutez le code suivant dans le fichier de démarrage de votre application tel que (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);
0
Shubham Verma

Si vous ne souhaitez pas installer la bibliothèque cors et que vous souhaitez plutôt corriger votre code d'origine, il vous manque également l'étape suivante: Access-Control-Allow-Origin: * est incorrect. Lorsque vous transmettez des jetons d’authentification (par exemple, JWT), vous devez indiquer explicitement toutes les URL appelant votre serveur. Vous ne pouvez pas utiliser "*" lorsque vous utilisez des jetons d'authentification.

0
user441058