Förstå CORS-fel i jQuery men inte i Postman

Arthur Petit

Torsdag 4 juli 2024 10:09:47

Varför uppstår CORS-fel i webbläsare?

När du arbetar med JavaScript för att ansluta till ett RESTful API kan du stöta på felet "Ingen "Access-Control-Allow-Origin"-rubrik finns på den begärda resursen. Det här felet uppstår vanligtvis på grund av webbläsarens Same Origin Policy, som begränsar webbsidor från att göra förfrågningar till en annan domän än den som tjänade webbsidan.

Intressant nog, när samma begäran görs genom verktyg som Postman, uppstår inget sådant fel. Denna skillnad kan vara förbryllande för utvecklare. Att förstå varför XMLHttpRequest eller hämta-anrop blockeras av CORS i webbläsaren, men inte i Postman, är avgörande för felsökning och utveckling av säkra webbapplikationer.

Lösa CORS-problem i JavaScript med Flask Backend

JavaScript-gränssnittskod med 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);
    });
  });
});

Installation av CORS i kolven

Python Backend-kod som använder kolv

# 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ösa CORS-problem i JavaScript med Flask Backend

JavaScript-gränssnittskod med 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);
    });
  });
});

Installation av CORS i kolven

Python Backend-kod som använder kolv

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

Varför CORS-problem uppstår i webbläsare och inte i Postman

En avgörande aspekt att förstå om Cross-Origin Resource Sharing (CORS) är säkerhetsmekanismen som webbläsare implementerar för att skydda användare. Webbläsare tillämpar Same-Origin Policy, som förhindrar webbsidor från att göra förfrågningar till en annan domän än den som tjänade webbsidan. Detta är en säkerhetsåtgärd för att förhindra skadliga webbplatser från att komma åt känslig information på andra webbplatser via JavaScript. När du gör en XMLHttpRequest eller hämta begäran från en webbläsare, letar den efter 'Access-Control-Allow-Origin' header i svaret från servern. Om denna rubrik inte finns eller inte tillåter det begärande ursprunget, kommer webbläsaren att blockera begäran, vilket resulterar i ett CORS-fel.

Postman, å andra sidan, är inte en webbläsare utan ett verktyg för att testa API:er. Den tillämpar inte samma ursprungspolicy eftersom den inte körs i webbläsarmiljön. Därför utför den inte samma säkerhetskontroller och tillåter förfrågningar att göras till vilken domän som helst utan begränsningar. Det är därför du inte stöter på CORS-problem när du använder Postman för att göra samma begäran. Att förstå denna skillnad är avgörande för att utvecklare ska kunna felsöka och lösa CORS-relaterade problem effektivt. Genom att konfigurera servern för att inkludera lämpliga CORS-rubriker kan du säkerställa att din webbapplikation kan kommunicera med externa API:er säkert och utan fel.

Vanliga frågor och svar om CORS och JavaScript

Vad är CORS?
CORS står för Cross-Origin Resource Sharing, en mekanism som gör att begränsade resurser på en webbsida kan begäras från en annan domän utanför den domän som resursen kommer från.
Varför tillämpar webbläsare policyn för samma ursprung?
Policyn för samma ursprung tillämpas för att skydda användarnas data och förhindra skadliga webbplatser från att komma åt känslig information från andra domäner via JavaScript.
Varför upprätthåller inte Postman CORS?
Postman tillämpar inte CORS eftersom det inte är en webbläsare och inte körs i en webbläsarmiljö, så det behöver inte följa Same-Origin Policy.
Hur kan jag lösa ett CORS-fel i min webbapplikation?
För att lösa ett CORS-fel, konfigurera servern att inkludera lämpligt 'Access-Control-Allow-Origin' header i svaret, vilket tillåter det begärande ursprunget.
Vad gör 'Access-Control-Allow-Origin' header göra?
De 'Access-Control-Allow-Origin' header anger vilka ursprung som tillåts åtkomst till resursen, vilket möjliggör förfrågningar om gränsöverskridande ursprung.
Vad är syftet med withCredentials i XMLHttpRequest?
De withCredentials egenskapen indikerar huruvida åtkomstkontrollförfrågningar på flera webbplatser ska göras med hjälp av referenser som cookies eller auktoriseringsrubriker.
Varför får jag ett CORS-fel trots att min server innehåller 'Access-Control-Allow-Origin' rubrik?
Du kan fortfarande få ett CORS-fel om andra nödvändiga CORS-rubriker, t.ex 'Access-Control-Allow-Methods' eller 'Access-Control-Allow-Headers', saknas eller är felaktigt konfigurerade.
Kan jag inaktivera CORS i min webbläsare?
Att inaktivera CORS i en webbläsare rekommenderas inte eftersom det äventyrar säkerheten. Konfigurera istället din server för att hantera CORS korrekt.
Vad är en preflight-förfrågan i CORS?
En preflight-begäran är en första begäran som görs av webbläsaren med OPTIONS-metoden för att avgöra om den faktiska begäran är säker att skicka. Den söker efter nödvändiga CORS-rubriker på servern.

Avslutar diskussionen

Att förstå nyanserna av CORS och Same Origin Policy är viktigt för webbutvecklare. Medan webbläsare tillämpar strikta säkerhetsåtgärder för att skydda användare, kringgår verktyg som Postman dessa begränsningar, vilket gör det lättare att testa API:er. Genom att korrekt konfigurera backend med nödvändiga CORS-huvuden kan utvecklare säkerställa smidig och säker kommunikation mellan frontend och backend. Att ta itu med CORS-problem är avgörande för att skapa funktionella och användarvänliga webbapplikationer.