Entendre els errors CORS a jQuery però no a Postman

Entendre els errors CORS a jQuery però no a Postman
Arthur Petit
Dijous, 4 de juliol de 2024 a les 9:29:54
JavaScript

Per què es produeixen errors CORS als navegadors?

Quan treballeu amb JavaScript per connectar-vos a una API RESTful, és possible que us trobeu amb l'error "No hi ha cap capçalera 'Access-Control-Allow-Origin' al recurs sol·licitat". Aquest error es produeix habitualment a causa de la Política del mateix origen del navegador, que restringeix que les pàgines web facin sol·licituds a un domini diferent del que va servir la pàgina web.

Curiosament, quan la mateixa sol·licitud es fa mitjançant eines com Postman, no es produeix aquest error. Aquesta diferència pot ser desconcertant per als desenvolupadors. Entendre per què les trucades XMLHttpRequest o recuperació estan bloquejades per CORS al navegador, però no a Postman, és crucial per resoldre problemes i desenvolupar aplicacions web segures.

Resolució de problemes CORS en JavaScript amb Flask Backend

Codi frontend JavaScript utilitzant 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);
    });
  });
});

Configuració de CORS a Flask

Codi de backend de Python mitjançant 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)

Resolució de problemes CORS en JavaScript amb Flask Backend

Codi frontend JavaScript utilitzant 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);
    });
  });
});

Configuració de CORS a Flask

Codi de backend de Python mitjançant 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)

Per què els problemes CORS es produeixen als navegadors i no a Postman

Un aspecte crucial per entendre sobre l'ús compartit de recursos entre orígens (CORS) és el mecanisme de seguretat que implementen els navegadors per protegir els usuaris. Els navegadors apliquen la política del mateix origen, que impedeix que les pàgines web facin sol·licituds a un domini diferent del que va servir la pàgina web. Aquesta és una mesura de seguretat per evitar que llocs web maliciosos accedeixin a informació sensible d'altres llocs web mitjançant JavaScript. Quan feu una XMLHttpRequest o una sol·licitud d'obtenció d'un navegador, comprova si hi ha 'Access-Control-Allow-Origin' capçalera a la resposta del servidor. Si aquesta capçalera no està present o no permet l'origen de la sol·licitud, el navegador bloquejarà la sol·licitud, donant lloc a un error CORS.

Postman, en canvi, no és un navegador sinó una eina per provar les API. No aplica la política del mateix origen perquè no s'executa a l'entorn del navegador. Per tant, no realitza les mateixes comprovacions de seguretat i permet fer peticions a qualsevol domini sense restriccions. És per això que no trobeu problemes de CORS quan feu servir Postman per fer la mateixa sol·licitud. Comprendre aquesta diferència és crucial perquè els desenvolupadors resolguin problemes relacionats amb CORS de manera eficaç. Si configureu el servidor perquè inclogui les capçaleres CORS adequades, podeu assegurar-vos que la vostra aplicació web es pugui comunicar amb API externes de manera segura i sense errors.

Preguntes i respostes habituals sobre CORS i JavaScript

  1. Què és CORS?
  2. CORS significa Cross-Origin Resource Sharing, un mecanisme que permet que els recursos restringits d'una pàgina web es sol·licitin des d'un altre domini fora del domini del qual s'ha originat el recurs.
  3. Per què els navegadors apliquen la política del mateix origen?
  4. La política del mateix origen s'aplica per protegir les dades dels usuaris i evitar que els llocs web maliciosos accedeixin a informació sensible d'altres dominis mitjançant JavaScript.
  5. Per què Postman no fa complir CORS?
  6. Postman no fa complir CORS perquè no és un navegador i no s'executa en un entorn de navegador, de manera que no cal que compleixi la política del mateix origen.
  7. Com puc resoldre un error CORS a la meva aplicació web?
  8. Per resoldre un error CORS, configureu el servidor perquè inclogui el corresponent 'Access-Control-Allow-Origin' la capçalera de la resposta, permetent l'origen sol·licitant.
  9. Què fa el 'Access-Control-Allow-Origin' la capçalera fer?
  10. El 'Access-Control-Allow-Origin' La capçalera especifica quins orígens poden accedir al recurs, habilitant les sol·licituds entre orígens.
  11. Quin és el propòsit withCredentials a XMLHttpRequest?
  12. El withCredentials La propietat indica si les sol·licituds de control d'accés entre llocs s'han de fer mitjançant credencials com ara galetes o capçaleres d'autorització.
  13. Per què rebo un error CORS tot i que el meu servidor inclou el 'Access-Control-Allow-Origin' capçalera?
  14. Encara podeu rebre un error CORS si altres capçaleres CORS necessàries, com ara 'Access-Control-Allow-Methods' o 'Access-Control-Allow-Headers', falten o estan mal configurats.
  15. Puc desactivar CORS al meu navegador?
  16. No es recomana desactivar CORS en un navegador, ja que compromet la seguretat. En lloc d'això, configureu el vostre servidor per gestionar CORS correctament.
  17. Què és una sol·licitud de vol previ a CORS?
  18. Una sol·licitud de comprovació prèvia és una sol·licitud inicial feta pel navegador mitjançant el mètode OPCIONS per determinar si la sol·licitud real és segura d'enviar. Comprova les capçaleres CORS necessàries al servidor.

Tancant la discussió

Entendre els matisos de CORS i la política del mateix origen és essencial per als desenvolupadors web. Tot i que els navegadors apliquen mesures de seguretat estrictes per protegir els usuaris, eines com Postman obvien aquestes restriccions, facilitant la prova de les API. En configurar correctament el backend amb les capçaleres CORS necessàries, els desenvolupadors poden garantir una comunicació fluida i segura entre el frontend i el backend. Abordar els problemes CORS és crucial per crear aplicacions web funcionals i fàcils d'utilitzar.