Pourquoi Postman n'obtient-il pas une erreur «Aucun en-tête« Access-Control-Allow-Origin »n'est présent sur la ressource demandée» lorsque mon code JavaScript le fait?

Remarque sur le mod : cette question concerne les raisons pour lesquelles Postman n'est pas soumis aux restrictions CORS de la même manière qu'un XMLHttpRequest. Cette question n'est pas sur la façon de corriger une erreur «Pas de« contrôle d'accès-autorisation-origine »...».

Veuillez arrêter de publier :

• Configurations CORS pour chaque langage / framework sous le soleil. Au lieu de cela, trouvez la question de votre langage / cadre pertinent .
• Services tiers qui permettent à une demande de contourner CORS
• Options de ligne de commande pour désactiver CORS pour divers navigateurs

J'essaie de faire une autorisation en utilisant JavaScript en me connectant au flacon intégré de l' API RESTful . 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 à accéder.

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 Postman ?

Voici le code de demande:

$.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);
    });

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

Lorsque vous utilisez Postman, ils ne sont pas limités par cette politique. Extrait 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 stratégie d'origine. Les extensions ne sont pas si limitées. Une extension peut parler à des serveurs distants en dehors de son origine, tant qu'elle demande d'abord des autorisations d'origine croisée.

AVERTISSEMENT: l' utilisation Access-Control-Allow-Origin: *peut rendre votre API / site Web vulnérable aux attaques de contrefaçon de demande intersite (CSRF). Assurez-vous de bien comprendre les risques avant d'utiliser ce code.

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: *'); ?>

Si vous utilisez Node-red, vous devez autoriser CORS dans le node-red/settings.jsfichier en supprimant les commentaires des 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"
},

Si vous utilisez Flask identique à la question; vous devez d'abord installerflask-cors

$ pip install -U flask-cors

Incluez ensuite les cors Flask dans votre application.

from flask_cors import CORS

Une application simple ressemblera à:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Pour plus de détails, vous pouvez consulter la documentation de Flask .

Parce que
$ .ajax ({type: "POST" - appelle OPTIONS
$ .post ( - Appelle POST

Les deux sont différents. Postman appelle correctement "POST", mais lorsque nous l'appellerons, ce sera "OPTIONS".

Pour les services Web C # - API Web

Veuillez ajouter le code suivant dans votre fichier web.config sous la balise <system.webServer>. Cela fonctionnera:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Veuillez vous assurer que vous ne faites aucune erreur dans l'appel Ajax

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

Note: Si vous cherchez le téléchargement de contenu à partir d' un site Web tiers alors cela ne vous aidera pas . Vous pouvez essayer le code suivant, mais pas JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

L'application d'une restriction CORS est une fonctionnalité de sécurité définie par un serveur et implémentée par un navigateur .

Le navigateur regarde la politique CORS du serveur et la respecte.

Cependant, l'outil Postman ne se soucie pas de la stratégie CORS du serveur.

C'est pourquoi l'erreur CORS apparaît dans le navigateur, mais pas dans Postman.

Dans l'enquête ci-dessous en tant qu'API, j'utilise http://example.com au lieu de http: // myApiUrl / login à partir de votre question, car cette première fonctionne.

Je suppose que votre page est sur http: //my-site.local: 8088 .

La raison pour laquelle vous voyez des résultats différents est que Postman:

• définir l'en-tête Host=example.com(votre API)
• PAS définir l'en-tête Origin

Ceci est similaire à la façon dont les navigateurs envoient des demandes lorsque le site et l'API ont le même domaine (les navigateurs définissent également l'élément d'en-tête Referer=http://my-site.local:8088, mais je ne le vois pas dans Postman). Lorsque l'en- Origintête n'est pas défini, les serveurs autorisent généralement de telles demandes par défaut.

C'est la manière standard dont Postman envoie les demandes. Mais un navigateur envoie des demandes différemment lorsque votre site et votre API ont des domaines différents , puis CORS se produit et le navigateur automatiquement:

• définit l'en-tête Host=example.com(le vôtre comme API)
• définit l'en-tête Origin=http://my-site.local:8088(votre site)

(L'en-tête Referera la même valeur que Origin). Et maintenant, dans l' onglet Console et réseaux de Chrome, vous verrez:

Lorsque vous disposez de Host != OriginCORS, et lorsque le serveur détecte une telle demande, il la bloque généralement par défaut .

Origin=nullest défini lorsque vous ouvrez du contenu HTML à partir d'un répertoire local et envoie une demande. La même situation se produit lorsque vous envoyez une demande à l'intérieur d'un <iframe>, comme dans l'extrait ci-dessous (mais ici l'en- Hosttête n'est pas défini du tout) - en général, partout où la spécification HTML dit origine opaque, vous pouvez traduire cela en Origin=null. Vous trouverez plus d'informations à ce sujet ici .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

Si vous n'utilisez pas une simple demande CORS, généralement le navigateur envoie automatiquement une demande OPTIONS avant d'envoyer la demande principale - plus d'informations sont ici . L'extrait ci-dessous le montre:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

Vous pouvez modifier la configuration de votre serveur pour autoriser les requêtes CORS.

Voici un exemple de configuration qui active CORS sur nginx (fichier nginx.conf) - soyez très prudent avec le réglage always/"$http_origin"pour nginx et "*"pour Apache - cela débloquera CORS de n'importe quel domaine.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Voici un exemple de configuration qui active CORS sur Apache (fichier .htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Rencontré la même erreur dans différents cas d'utilisation.

Cas d'utilisation: en chrome lorsque vous essayez d'appeler le point final Spring REST en angulaire.

Solution: ajoutez une annotation @CrossOrigin ("*") au-dessus de la classe de contrôleur respective.

Si vous utilisez .NET comme niveau intermédiaire, vérifiez clairement l'attribut de route, par exemple,

J'ai eu un problème quand c'était comme ça,

[Route("something/{somethingLong: long}")] //Space.

Fixé par cela,

[Route("something/{somethingLong:long}")] //No space

Uniquement pour le projet d'API Web .NET Core, ajoutez les modifications suivantes:

1. Ajoutez le code suivant après la services.AddMvc()ligne dans la ConfigureServices()méthode du fichier Startup.cs:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Ajoutez le code suivant après la app.UseMvc()ligne dans la Configure()méthode du fichier Startup.cs:

app.UseCors(options => options.AllowAnyOrigin());

3. Ouvrez le contrôleur auquel vous souhaitez accéder en dehors du domaine et ajoutez cet attribut suivant au niveau du contrôleur:

[EnableCors("AllowOrigin")]