6
votes

L'accès à récupérer à *** de l'origine *** a été bloqué par la stratégie CORS: Non 'Access-Control-Allow-Origin'

J'ai l'erreur

Accès pour récupérer à ' http: // localhost: 5000 / admin / authenticate ' depuis l'origine " http: // localhost: 3000 " a été bloqué par la stratégie CORS: Non "Access-Control-Allow-Origin" l'en-tête est présent sur la ressource demandée. Si une réponse opaque répond à vos besoins, définissez le mode de la requête sur «no-cors» pour récupérer la ressource avec CORS désactivé.

Mon ApiManager

services.AddCors(options =>
{
    options.AddPolicy(
        _corsName,
        builder => { builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials(); });}
);

Dans le backend Asp.Net Core 2.2 (Startup.cs), j'écris:

function login(username, password) {
    const requestOptions = {
        method: 'POST',
        headers: {    
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*' },
        body: JSON.stringify({ username, password })};

    return fetch(`http://localhost:5000/admin/authenticate`, requestOptions)
        .then(handleResponse)
        .then(user => {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('user', JSON.stringify(user));
            return user;
        }
    );
}


3 commentaires

AllowAnyOrigin (). AllowAnyMethod (). AllowAnyHeader (). AllowCred‌ entials () n'est PAS une configuration CORS valide, veuillez prendre le temps de lire developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/…


Quel est le résultat attendu de la définition des en-têtes 'Accept': 'application / json' et 'Access-Control-Allow-Origin': '*' côté client?


Je crois qu'avec votre code, vous n'avez enregistré que le service CORS et ne l'avez pas activé. Je ferais référence au documentation et voyez où votre code diffère spécifiquement.


5 Réponses :


-9
votes

Il existe un bogue dans Chrome qui affecte les utilisateurs depuis des années maintenant, il peut être trouvé ici .

Vous pouvez utiliser l'extension Chrome Allow-Control-Allow-Origin: * disponible ici: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Vous pouvez également utiliser http://lacolhost.com/ qui pointe vers 127.0.0.1 comme localhost.


3 commentaires

C'est complètement faux et trompeur. Vous pouvez utiliser CORS dans localhost très bien


Étrange, étant donné que j'ai utilisé CORS dans Chrome sur localhost au cours des 18 derniers mois.


Cela est dû à un bug trouvé ici bugs.chromium.org/p/ chrome / issues / detail? id = 67743 Je suppose que cela n'arrive pas à tout le monde.



0
votes

Essayez ceci:

on Startup.cs => Confirgure add:
     app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials());


0 commentaires

1
votes

Bonjour, je suis nouveau sur ce sujet, mais comme j'ai eu cette erreur la semaine dernière, j'ai essayé d'activer la méthode des options et la première partie a été résolue. Cette erreur se produit en raison de problèmes de politique et de sécurité, mais maintenant je vous renvoie pour obtenir le code d'état et dans mon cas, c'était une erreur 405, ce qui signifie que nous devons maintenant changer nos en-têtes dans la demande pour autoriser toutes les méthodes et origines (pas du tout) mais cela ne m'aide pas.

J'ai donc compris que j'avais activé le cryptage des cookies et la session (dans une large mesure) dans mon application pour mon API, donc je les ai désactivés et effacé également les cookies du navigateur. p >

Alors essayez d'utiliser ceux-ci:

  1. Effacez vos cookies et ajoutez Access-Control-Allow-Origin ':' * ' par l'extension Mod Header et réessayez pour vérifier le correctif. mod header - votre en-tête (client)

  2. Essayez d'utiliser une interface intermédiaire pour contrôler votre demande et les guider dans les règles spéciales

    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      next();
    });

Selon ce site: https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and- comment-le-contrôle-d'accès-autoriser-l'origine-fonctionne-d97d55946d9


0 commentaires

0
votes

Si votre serveur est basé sur express.js, ajoutez ces lignes au serveur:

app.use(function (req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
})


0 commentaires

2
votes

J'ai essayé la réponse d'Anerco mais cela n'a pas fonctionné pour moi, j'ai trouvé ceci article , il a une solution très similaire mais avec .SetIsOriginAllowed (origin => true) ajouté et .AllowAnyOrigin () supprimé.

Vous devriez donc ajouter ce code à votre méthode Configure dans la classe de démarrage:

app.UseCors(x => x
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .SetIsOriginAllowed(origin => true) // allow any origin
                    .AllowCredentials()); // allow credentials

Je recommande de lire l'article pour mieux comprendre tout cela, il est très court et va droit au but.


0 commentaires