CORS-fouten begrijpen in jQuery, maar niet in Postman

CORS-fouten begrijpen in jQuery, maar niet in Postman
Arthur Petit
Donderdag 4 juli 2024 om 09:36:03
JavaScript

Waarom treden CORS-fouten op in browsers?

Wanneer u met JavaScript werkt om verbinding te maken met een RESTful API, kunt u de foutmelding 'Er is geen 'Access-Control-Allow-Origin'-header aanwezig op de aangevraagde bron' tegenkomen. Deze fout treedt meestal op vanwege het Same Origin Policy van de browser, dat webpagina's verbiedt verzoeken te doen aan een ander domein dan het domein dat de webpagina bediende.

Interessant is dat wanneer hetzelfde verzoek wordt gedaan via tools als Postman, een dergelijke fout niet optreedt. Dit verschil kan voor ontwikkelaars verwarrend zijn. Begrijpen waarom XMLHttpRequest- of fetch-oproepen door CORS in de browser worden geblokkeerd, maar niet in Postman, is van cruciaal belang voor het oplossen van problemen en het ontwikkelen van veilige webapplicaties.

CORS-problemen in JavaScript oplossen met Flask Backend

JavaScript-frontendcode met 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);
    });
  });
});

CORS instellen in Flask

Python-backendcode met behulp van 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)

CORS-problemen in JavaScript oplossen met Flask Backend

JavaScript-frontendcode met 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);
    });
  });
});

CORS instellen in Flask

Python-backendcode met behulp van 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)

Waarom CORS-problemen optreden in browsers en niet in Postman

Een cruciaal aspect dat u moet begrijpen over Cross-Origin Resource Sharing (CORS) is het beveiligingsmechanisme dat browsers implementeren om gebruikers te beschermen. Browsers handhaven het Same-Origin Policy, dat voorkomt dat webpagina's verzoeken indienen bij een ander domein dan het domein dat de webpagina bediende. Dit is een beveiligingsmaatregel om te voorkomen dat kwaadwillende websites via JavaScript toegang krijgen tot gevoelige informatie op andere websites. Wanneer u een XMLHttpRequest of een ophaalverzoek vanuit een browser doet, wordt er gecontroleerd op de 'Access-Control-Allow-Origin' header in het antwoord van de server. Als deze header niet aanwezig is of de aanvragende oorsprong niet toestaat, blokkeert de browser het verzoek, wat resulteert in een CORS-fout.

Postman daarentegen is geen browser maar een tool voor het testen van API’s. Het dwingt het Same-Origin-beleid niet af omdat het niet binnen de browseromgeving draait. Daarom voert het niet dezelfde veiligheidscontroles uit en kunnen aanvragen zonder beperkingen naar elk domein worden gedaan. Dit is de reden waarom u geen CORS-problemen tegenkomt wanneer u Postman gebruikt om hetzelfde verzoek in te dienen. Het begrijpen van dit verschil is van cruciaal belang voor ontwikkelaars om CORS-gerelateerde problemen effectief op te lossen en op te lossen. Door de server zo te configureren dat deze de juiste CORS-headers bevat, kunt u ervoor zorgen dat uw webapplicatie veilig en foutloos kan communiceren met externe API's.

Veelgestelde vragen en antwoorden over CORS en JavaScript

  1. Wat is CORS?
  2. CORS staat voor Cross-Origin Resource Sharing, een mechanisme waarmee beperkte bronnen op een webpagina kunnen worden opgevraagd bij een ander domein buiten het domein waarvan de bron afkomstig is.
  3. Waarom handhaven browsers het Same-Origin-beleid?
  4. Het Same-Origin-beleid wordt afgedwongen om de gegevens van gebruikers te beschermen en te voorkomen dat kwaadwillende websites via JavaScript toegang krijgen tot gevoelige informatie uit andere domeinen.
  5. Waarom handhaaft Postman CORS niet?
  6. Postman dwingt CORS niet af omdat het geen browser is en niet in een browseromgeving draait, en dus niet hoeft te voldoen aan het Same-Origin Policy.
  7. Hoe kan ik een CORS-fout in mijn webapplicatie oplossen?
  8. Om een ​​CORS-fout op te lossen, configureert u de server zo dat deze de juiste gegevens bevat 'Access-Control-Allow-Origin' header in het antwoord, waardoor de aanvragende oorsprong mogelijk is.
  9. Wat doet de 'Access-Control-Allow-Origin' kop doen?
  10. De 'Access-Control-Allow-Origin' header specificeert welke oorsprong toegang heeft tot de bron, waardoor cross-origin-verzoeken mogelijk zijn.
  11. Wat is het doel van withCredentials in XMLHttpRequest?
  12. De withCredentials eigenschap geeft aan of cross-site Access-Control-verzoeken al dan niet moeten worden gedaan met behulp van inloggegevens zoals cookies of autorisatieheaders.
  13. Waarom krijg ik een CORS-fout, ook al bevat mijn server de 'Access-Control-Allow-Origin' koptekst?
  14. Mogelijk krijgt u nog steeds een CORS-fout als andere vereiste CORS-headers, zoals 'Access-Control-Allow-Methods' of 'Access-Control-Allow-Headers', ontbreken of zijn onjuist geconfigureerd.
  15. Kan ik CORS uitschakelen in mijn browser?
  16. Het uitschakelen van CORS in een browser wordt niet aanbevolen, omdat dit de veiligheid in gevaar brengt. Configureer in plaats daarvan uw server om CORS correct af te handelen.
  17. Wat is een preflightverzoek in CORS?
  18. Een preflightverzoek is een initieel verzoek dat door de browser wordt gedaan met behulp van de OPTIONS-methode om te bepalen of het daadwerkelijke verzoek veilig kan worden verzonden. Het controleert op vereiste CORS-headers op de server.

Afronding van de discussie

Het begrijpen van de nuances van CORS en het Same Origin Policy is essentieel voor webontwikkelaars. Terwijl browsers strikte beveiligingsmaatregelen afdwingen om gebruikers te beschermen, omzeilen tools als Postman deze beperkingen, waardoor het gemakkelijker wordt om API's te testen. Door de backend goed in te richten met de benodigde CORS-headers kunnen ontwikkelaars zorgen voor een soepele en veilige communicatie tussen de frontend en backend. Het aanpakken van CORS-problemen is cruciaal voor het creëren van functionele en gebruiksvriendelijke webapplicaties.