Comprendre les erreurs CORS dans jQuery mais pas dans Postman

Arthur Petit

Jeudi 4 juillet 2024 à 09:25:01

Pourquoi des erreurs CORS se produisent-elles dans les navigateurs ?

Lorsque vous travaillez avec JavaScript pour vous connecter à une API RESTful, vous pouvez rencontrer une erreur « Aucun en-tête « Access-Control-Allow-Origin » n'est présent sur la ressource demandée ». Cette erreur se produit généralement en raison de la politique de même origine du navigateur, qui empêche les pages Web d'effectuer des requêtes vers un domaine différent de celui qui a servi la page Web.

Il est intéressant de noter que lorsque la même demande est effectuée via des outils tels que Postman, aucune erreur de ce type ne se produit. Cette différence peut laisser perplexe les développeurs. Comprendre pourquoi les appels XMLHttpRequest ou fetch sont bloqués par CORS dans le navigateur, mais pas dans Postman, est crucial pour le dépannage et le développement d'applications Web sécurisées.

Résoudre les problèmes CORS en JavaScript avec Flask Backend

Code frontal JavaScript utilisant jQuery

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

Configuration de CORS dans Flask

Code backend Python utilisant Flask

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Résoudre les problèmes CORS en JavaScript avec Flask Backend

Code frontal JavaScript utilisant jQuery

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

Configuration de CORS dans Flask

Code backend Python utilisant Flask

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Pourquoi les problèmes CORS se produisent dans les navigateurs et non dans Postman

Un aspect crucial à comprendre à propos du partage de ressources cross-origine (CORS) est le mécanisme de sécurité que les navigateurs mettent en œuvre pour protéger les utilisateurs. Les navigateurs appliquent la politique de même origine, qui empêche les pages Web d'effectuer des requêtes vers un domaine différent de celui qui a servi la page Web. Il s'agit d'une mesure de sécurité visant à empêcher les sites Web malveillants d'accéder à des informations sensibles sur d'autres sites Web via JavaScript. Lorsque vous effectuez une requête XMLHttpRequest ou récupérez depuis un navigateur, il vérifie le 'Access-Control-Allow-Origin' en-tête dans la réponse du serveur. Si cet en-tête n'est pas présent ou n'autorise pas l'origine de la requête, le navigateur bloquera la requête, entraînant une erreur CORS.

Postman, en revanche, n'est pas un navigateur mais un outil de test d'API. Il n'applique pas la stratégie de même origine car il ne s'exécute pas dans l'environnement du navigateur. Par conséquent, il n’effectue pas les mêmes contrôles de sécurité et permet d’effectuer des requêtes vers n’importe quel domaine sans restrictions. C'est pourquoi vous ne rencontrez pas de problèmes CORS lorsque vous utilisez Postman pour faire la même demande. Comprendre cette différence est crucial pour que les développeurs puissent dépanner et résoudre efficacement les problèmes liés à CORS. En configurant le serveur pour inclure les en-têtes CORS appropriés, vous pouvez vous assurer que votre application Web peut communiquer avec des API externes en toute sécurité et sans erreur.

Questions et réponses courantes sur CORS et JavaScript

Qu’est-ce que CORS ?
CORS signifie Cross-Origin Resource Sharing, un mécanisme qui permet de demander des ressources restreintes sur une page Web à un autre domaine en dehors du domaine d'où provient la ressource.
Pourquoi les navigateurs appliquent-ils la politique de même origine ?
La politique de même origine est appliquée pour protéger les données des utilisateurs et empêcher les sites Web malveillants d'accéder aux informations sensibles provenant d'autres domaines via JavaScript.
Pourquoi Postman n'applique-t-il pas CORS ?
Postman n'applique pas CORS car il ne s'agit pas d'un navigateur et ne s'exécute pas dans un environnement de navigateur, il n'a donc pas besoin d'adhérer à la politique de même origine.
Comment puis-je résoudre une erreur CORS dans mon application Web ?
Pour résoudre une erreur CORS, configurez le serveur pour inclure le 'Access-Control-Allow-Origin' en-tête dans la réponse, permettant l’origine de la demande.
Que fait le 'Access-Control-Allow-Origin' l'en-tête fait-il ?
Le 'Access-Control-Allow-Origin' l'en-tête spécifie quelles origines sont autorisées à accéder à la ressource, permettant ainsi les requêtes multi-origines.
Quel est le but de withCredentials dans XMLHttpRequest ?
Le withCredentials La propriété indique si les demandes de contrôle d'accès intersites doivent être effectuées ou non à l'aide d'informations d'identification telles que des cookies ou des en-têtes d'autorisation.
Pourquoi est-ce que j'obtiens une erreur CORS même si mon serveur inclut le 'Access-Control-Allow-Origin' entête?
Vous pouvez toujours obtenir une erreur CORS si d'autres en-têtes CORS requis, tels que 'Access-Control-Allow-Methods' ou 'Access-Control-Allow-Headers', sont manquants ou mal configurés.
Puis-je désactiver CORS dans mon navigateur ?
La désactivation de CORS dans un navigateur n'est pas recommandée car elle compromet la sécurité. Au lieu de cela, configurez votre serveur pour gérer correctement CORS.
Qu’est-ce qu’une demande de contrôle en amont dans CORS ?
Une demande de contrôle en amont est une demande initiale effectuée par le navigateur à l'aide de la méthode OPTIONS pour déterminer si la demande réelle peut être envoyée en toute sécurité. Il vérifie les en-têtes CORS requis sur le serveur.

Conclusion de la discussion

Comprendre les nuances du CORS et de la politique de même origine est essentiel pour les développeurs Web. Alors que les navigateurs appliquent des mesures de sécurité strictes pour protéger les utilisateurs, des outils comme Postman contournent ces restrictions, facilitant ainsi le test des API. En configurant correctement le backend avec les en-têtes CORS nécessaires, les développeurs peuvent garantir une communication fluide et sécurisée entre le frontend et le backend. Résoudre les problèmes CORS est crucial pour créer des applications Web fonctionnelles et conviviales.