Question Pourquoi mon JavaScript obtient-il une erreur "Non" Access-Control-Allow-Origin "sur la ressource demandée" lorsque Postman ne le fait pas?


J'essaie de faire une autorisation en utilisant JavaScript en se connectant à la Reposant  API construit en Ballon. Cependant, lorsque je fais la demande, j'obtiens l'erreur suivante:

XMLHttpRequest ne peut pas charger http: // myApiUrl / login. Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'origine 'null' n'est donc pas autorisée.

Je sais que l'API ou la ressource distante doit définir l'en-tête, mais pourquoi cela a-t-il fonctionné lorsque j'ai fait la demande via l'extension Chrome? Facteur?

C'est le code de requête:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

1859
2017-11-17 19:29


origine


Réponses:


Si j'ai bien compris, vous faites un XMLHttpRequest à un domaine différent de celui de votre page. Donc, le navigateur le bloque car il permet généralement une demande dans la même origine pour des raisons de sécurité. Vous devez faire quelque chose de différent lorsque vous souhaitez effectuer une requête interdomaine. Un tutoriel sur la façon d'y parvenir est Utiliser CORS.

Lorsque vous utilisez un facteur, ils ne sont pas limités par cette politique. Cité de Cross-Origin XMLHttpRequest:

Les pages Web normales peuvent utiliser l'objet XMLHttpRequest pour envoyer et recevoir des données à partir de serveurs distants, mais elles sont limitées par la même règle d'origine. Les extensions ne sont pas si limitées. Une extension peut communiquer avec des serveurs distants en dehors de son origine, tant qu'elle demande d'abord des autorisations d'origine croisée.


998
2017-11-17 19:49



Ce n'est pas un correctif pour la production ou lorsque l'application doit être montrée au client, ceci n'est utile que lorsque l'interface utilisateur et le backend développement  sont sur différents les serveurs et en production, ils sont en fait sur le même serveur. Par exemple: Lors du développement de l'interface utilisateur pour n'importe quelle application s'il est nécessaire de la tester localement en la pointant vers le serveur principal, dans ce scénario, c'est le correctif parfait. Pour corriger la production, les en-têtes CORS doivent être ajoutés au serveur principal pour permettre l'accès d'origine croisée.

Le plus simple est de simplement ajouter l'extension dans google chrome pour autoriser l'accès à l'aide de CORS.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=fr)

Activez simplement cette extension quand vous voulez permettre l'accès à aucun 'access-control-allow-origine' demande d'en-tête.

Ou 

Dans Windows, collez cette commande dans courir fenêtre

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

cela va ouvrir une nouvelle chrome navigateur qui permet l'accès à aucun 'access-control-allow-origine' demande d'en-tête.


451
2018-03-04 06:42



Si vous pouvez faire face à JSON en retour, essayez d'utiliser JSONP (noter la P à la fin) pour parler entre domaines:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

En savoir plus sur l'utilisation de JSONP ici:

L'avènement de JSONP - essentiellement un hack de scripts inter-sites consensuel - a ouvert la voie à de puissants mashups de contenu. De nombreux sites importants fournissent des services JSONP, vous permettant d'accéder à leur contenu via une API prédéfinie.


311
2018-02-22 00:42



C'est très simple à résoudre si vous utilisez PHP. Ajoutez simplement le script suivant au début de votre page PHP qui gère la requête:

<?php header('Access-Control-Allow-Origin: *'); ?>

Attention: Cela contient un problème de sécurité pour votre fichier PHP qui pourrait être appelé par des attaquants. vous devez utiliser des sessions et des cookies pour l'authentification afin d'empêcher votre fichier / service contre cette attaque. Votre service est vulnérable à contrefaçon de requête intersite (CSRF).

Si vous utilisez Nœud rouge vous devez autoriser CORS dans le node-red/settings.js déposer en décochant les lignes suivantes:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

186
2017-12-03 20:24



Je souhaite que quelqu'un a partagé ce site avec moi il y a longtemps http://cors.io/ cela m'aurait permis de gagner beaucoup de temps par rapport à la construction et à l'utilisation de mon propre proxy. Cependant, lorsque vous passez en production, il est préférable d'avoir votre propre proxy, car vous contrôlez tous les aspects de vos données.

Tout ce dont tu as besoin:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


142
2017-07-21 22:08



Il y a un problème interdomaines en utilisant Ajax. Vous devez être sûr que vous accédez à vos fichiers sur le même http:// chemin sans www. (ou accès depuis http://www. et poster sur le même chemin, y compris www.) que le navigateur considère comme un autre domaine lors de l'accès via un www. chemin, de sorte que vous voyez où le problème est. Vous publiez sur un domaine différent et le navigateur bloque le flux en raison du problème d'origine.

Si la API n'est pas placé sur le même hôte que celui que vous demandez, le flux est bloqué et vous devrez trouver un autre moyen de communiquer avec l'API.


61
2018-03-12 08:53



Si vous utilisez Node.js, essayez-le:

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

Plus d'information: CORS sur ExpressJS


55
2018-02-12 16:27