Forstå CORS-fejl i jQuery, men ikke i Postman

Forstå CORS-fejl i jQuery, men ikke i Postman
Arthur Petit
Torsdag den 4. juli 2024 kl. 09.34.47
JavaScript

Hvorfor opstår CORS-fejl i browsere?

Når du arbejder med JavaScript for at oprette forbindelse til en RESTful API, kan du støde på fejlen "Ingen 'Access-Control-Allow-Origin'-header er til stede på den anmodede ressource". Denne fejl opstår ofte på grund af browserens Same Origin Policy, som begrænser websider i at foretage anmodninger til et andet domæne end det, der tjente websiden.

Interessant nok, når den samme anmodning foretages gennem værktøjer som Postman, sker der ingen sådan fejl. Denne forskel kan være forvirrende for udviklere. At forstå, hvorfor XMLHttpRequest eller hente-opkald blokeres af CORS i browseren, men ikke i Postman, er afgørende for fejlfinding og udvikling af sikre webapplikationer.

Løsning af CORS-problemer i JavaScript med Flask Backend

JavaScript-frontend-kode ved hjælp af 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);
    });
  });
});

Opsætning af CORS i kolben

Python Backend-kode ved hjælp af kolbe

# 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)

Løsning af CORS-problemer i JavaScript med Flask Backend

JavaScript-frontend-kode ved hjælp af 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);
    });
  });
});

Opsætning af CORS i kolben

Python Backend-kode ved hjælp af kolbe

# 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)

Hvorfor CORS-problemer opstår i browsere og ikke i Postman

Et afgørende aspekt at forstå om Cross-Origin Resource Sharing (CORS) er den sikkerhedsmekanisme, som browsere implementerer for at beskytte brugerne. Browsere håndhæver Same-Origin Policy, som forhindrer websider i at sende anmodninger til et andet domæne end det, der tjente websiden. Dette er en sikkerhedsforanstaltning for at forhindre ondsindede websteder i at få adgang til følsomme oplysninger på andre websteder via JavaScript. Når du laver en XMLHttpRequest eller hente-anmodning fra en browser, tjekker den for 'Access-Control-Allow-Origin' header i svaret fra serveren. Hvis denne header ikke er til stede eller ikke tillader den anmodende oprindelse, vil browseren blokere anmodningen, hvilket resulterer i en CORS-fejl.

Postman er på den anden side ikke en browser, men et værktøj til at teste API'er. Den håndhæver ikke Same-Origin Policy, fordi den ikke kører i browsermiljøet. Derfor udfører den ikke de samme sikkerhedstjek og tillader, at der sendes anmodninger til ethvert domæne uden begrænsninger. Det er derfor, du ikke støder på CORS-problemer, når du bruger Postman til at fremsætte den samme anmodning. At forstå denne forskel er afgørende for, at udviklere kan fejlfinde og løse CORS-relaterede problemer effektivt. Ved at konfigurere serveren til at inkludere de passende CORS-headere, kan du sikre, at din webapplikation kan kommunikere med eksterne API'er sikkert og uden fejl.

Almindelige spørgsmål og svar om CORS og JavaScript

  1. Hvad er CORS?
  2. CORS står for Cross-Origin Resource Sharing, en mekanisme, der tillader begrænsede ressourcer på en webside at blive anmodet om fra et andet domæne uden for det domæne, som ressourcen stammer fra.
  3. Hvorfor håndhæver browsere Same-Origin Policy?
  4. Samme-oprindelsespolitikken håndhæves for at beskytte brugernes data og forhindre ondsindede websteder i at få adgang til følsomme oplysninger fra andre domæner via JavaScript.
  5. Hvorfor håndhæver Postman ikke CORS?
  6. Postman håndhæver ikke CORS, fordi det ikke er en browser og ikke kører i et browsermiljø, så det behøver ikke at overholde Same-Origin Policy.
  7. Hvordan kan jeg løse en CORS-fejl i min webapplikation?
  8. For at løse en CORS-fejl skal du konfigurere serveren til at inkludere den relevante 'Access-Control-Allow-Origin' header i svaret, der tillader den anmodende oprindelse.
  9. Hvad gør 'Access-Control-Allow-Origin' header gøre?
  10. Det 'Access-Control-Allow-Origin' header angiver, hvilke oprindelser der har tilladelse til at få adgang til ressourcen, hvilket muliggør anmodninger på tværs af oprindelse.
  11. Hvad er formålet med withCredentials i XMLHttpRequest?
  12. Det withCredentials egenskaben angiver, hvorvidt adgangskontrolanmodninger på tværs af websteder skal foretages ved hjælp af legitimationsoplysninger såsom cookies eller autorisationsoverskrifter.
  13. Hvorfor får jeg en CORS-fejl, selvom min server indeholder 'Access-Control-Allow-Origin' header?
  14. Du får muligvis stadig en CORS-fejl, hvis andre påkrævede CORS-headere, som f.eks 'Access-Control-Allow-Methods' eller 'Access-Control-Allow-Headers', mangler eller er forkert konfigureret.
  15. Kan jeg deaktivere CORS i min browser?
  16. Deaktivering af CORS i en browser anbefales ikke, da det kompromitterer sikkerheden. Konfigurer i stedet din server til at håndtere CORS korrekt.
  17. Hvad er en forhåndsanmodning i CORS?
  18. En forhåndsanmodning er en indledende anmodning foretaget af browseren ved hjælp af OPTIONS-metoden for at afgøre, om den faktiske anmodning er sikker at sende. Den tjekker for nødvendige CORS-headere på serveren.

Afslutning af diskussionen

At forstå nuancerne i CORS og Same Origin Policy er afgørende for webudviklere. Mens browsere håndhæver strenge sikkerhedsforanstaltninger for at beskytte brugere, omgår værktøjer som Postman disse begrænsninger, hvilket gør det nemmere at teste API'er. Ved at konfigurere backend korrekt med de nødvendige CORS-headere, kan udviklere sikre jævn og sikker kommunikation mellem frontend og backend. At løse CORS-problemer er afgørende for at skabe funktionelle og brugervenlige webapplikationer.