J'ai rencontré des problèmes CORS plusieurs fois et je peux généralement les résoudre, mais je veux vraiment comprendre en voyant cela à partir d'un paradigme de pile MEAN.
Avant j'ai simplement ajouté un middleware sur mon serveur express pour attraper ces choses, mais il semble qu'il y ait une sorte de pré-hook qui dérange mes demandes.
Le champ d'en-tête de demande Access-Control-Allow-Headers n'est pas autorisé par Access-Control-Allow-Headers dans la réponse de contrôle en amont
J'ai supposé que je pouvais faire ceci:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","*")
})
ou l'équivalent, mais cela ne semble pas le réparer. J'ai aussi bien sûr essayé
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers")
})
Toujours pas de chance.
Access-Control-Request-Headers
header("Access-Control-Allow-Headers: Content-Type")
Voici ce que vous devez ajouter pour que cela fonctionne.
Le navigateur envoie une demande de contrôle en amont (avec le type de méthode OPTIONS) pour vérifier si le service hébergé sur le serveur est autorisé à accéder à partir du navigateur sur un domaine différent. En réponse à la demande de contrôle en amont si vous injectez les en-têtes ci-dessus, le navigateur comprend qu'il est correct de faire d'autres appels et j'obtiendrai une réponse valide à mon appel GET / POST réel. vous pouvez restreindre le domaine auquel l'accès est accordé en utilisant Access-Control-Allow-Origin "," localhost, xvz.com "au lieu de *. (* accordera l'accès à tous les domaines)
la source
*
pour...-Origin
ettrue
pour...-Credentials
. Il n'échouera pas pour les demandes sans accréditation, mais il ne fonctionnera pas non plus pour les demandes avec accréditation. Voir le lien que j'ai publié dans ma réponse.response.setHeader("Access-Control-Allow-Headers", "*")
? Quelle est l'implication de sécurité de faire cela?Ce problème résolu avec
Particulier dans mon projet (express.js / nodejs)
Mettre à jour:
À chaque erreur:
Access-Control-Allow-Headers is not allowed by itself in preflight response
erreur, vous pouvez voir ce qui ne va pas avec l' outil de développement Chrome :l'erreur ci-dessus est manquante,
Content-Type
alors ajoutez une chaîneContent-Type
àAccess-Control-Allow-Headers
la source
La réponse acceptée est correcte, mais j'ai eu du mal à la comprendre. Voici donc un exemple simple pour le clarifier.
Dans ma demande ajax, j'avais un en-tête d'autorisation standard.
Ce code produit l'erreur dans la question. Ce que je devais faire sur mon serveur nodejs était d'ajouter une autorisation dans les en-têtes autorisés:
la source
Pour ajouter aux autres réponses. J'ai eu le même problème et voici le code que j'ai utilisé dans mon serveur express pour autoriser les appels REST:
Ce que ce code fait essentiellement intercepte toutes les demandes et ajoute les en-têtes CORS, puis continue avec mes itinéraires normaux. Lorsqu'il y a une demande OPTIONS, elle ne répond qu'avec les en-têtes CORS.
EDIT: J'utilisais ce correctif pour deux serveurs express nodejs distincts sur la même machine. Finalement, j'ai résolu le problème avec un simple serveur proxy.
la source
Je viens de rencontrer ce problème moi-même, dans le contexte d'ASP.NET, assurez-vous que votre Web.config ressemble à ceci:
Notez la valeur d'autorisation pour la
Access-Control-Allow-Headers
clé. Il me manquait la valeur d'autorisation, cette configuration résout mon problème.la source
Très bien, je l'ai utilisé sur un projet Silex
la source
Dans Chrome:
Pour moi, cette erreur a été déclenchée par un espace de fin dans l'URL de cet appel.
la source
Juste pour ajouter que vous pouvez également mettre ces en-têtes dans le fichier de configuration Webpack. J'en avais besoin comme dans mon cas car j'utilisais le serveur de développement webpack.
la source
res.setHeader ('Access-Control-Allow-Headers', '*');
la source
J'ai reçu l'erreur indiquée par l'OP en utilisant Django, React et la bibliothèque django-cors-headers. Pour le corriger avec cette pile, procédez comme suit:
Dans settings.py, ajoutez ce qui suit selon la documentation officielle .
la source
ce problème se produit lorsque nous créons un en-tête personnalisé pour la demande. Cette demande qui utilise le
HTTP OPTIONS
et inclut plusieurs en-têtes.L'en-tête requis pour cette demande est
Access-Control-Request-Headers
, qui devrait faire partie de l'en-tête de réponse et devrait permettre la demande de toute l'origine. Parfois, il a également besoinContent-Type
d'en-tête de réponse. Donc, votre en-tête de réponse devrait être comme ça -la source
Dans Post API, nous envoyons des données dans le corps de la demande. Donc, si nous envoyons des données en ajoutant un en-tête supplémentaire à un appel API. Ensuite, le premier appel de l'API OPTIONS se produira, puis le post-appel aura lieu. Par conséquent, vous devez d'abord gérer l'appel de l'API OPTION.
Vous pouvez gérer le problème en écrivant un filtre et à l'intérieur que vous devez vérifier l'appel d'API d'appel d'option et retourner un état 200 OK. Voici l'exemple de code:
la source
Si vous essayez d'ajouter un en-tête personnalisé sur les en-têtes de demande, vous devez informer le serveur qu'un en-tête spécifique est autorisé à avoir lieu. L'endroit pour le faire est dans la classe qui filtre les demandes. Dans l'exemple ci-dessous, le nom d'en-tête personnalisé est "type":
la source
Après avoir passé presque une journée, je viens de découvrir que l'ajout des deux codes ci-dessous a résolu mon problème.
Ajoutez ceci dans le Global.asax
et dans la configuration Web, ajoutez ce qui suit
la source
Moi aussi, j'ai rencontré le même problème dans Angular 6. J'ai résolu le problème en utilisant le code ci-dessous. Ajoutez le code dans le fichier component.ts.
la source
Ce même problème auquel j'étais confronté.
J'ai fait un simple changement.
la source
Le message est clair que «l'autorisation» n'est pas autorisée dans l'API. Définissez
Access-Control-Allow-Headers: "Content-Type, Authorization"
la source
Ajouter des cors dans la fonction get est ce qui a fonctionné pour moi
la source