Pochopení chyb CORS v jQuery, ale ne v Postman

Arthur Petit

čtvrtek 4. července 2024 9:33:34

Proč se v prohlížečích vyskytují chyby CORS?

Při práci s JavaScriptem pro připojení k RESTful API se můžete setkat s chybou „Na požadovaném zdroji není přítomno záhlaví 'Access-Control-Allow-Origin'. Tato chyba se běžně vyskytuje kvůli zásadám stejného původu prohlížeče, které omezují webovým stránkám odesílání požadavků na jinou doménu, než která danou webovou stránku obsluhovala.

Je zajímavé, že když je stejný požadavek podán prostřednictvím nástrojů, jako je Postman, žádná taková chyba nenastane. Tento rozdíl může být pro vývojáře matoucí. Pochopení toho, proč jsou volání XMLHttpRequest nebo načítání blokována CORS v prohlížeči, ale ne v Postman, je zásadní pro řešení problémů a vývoj bezpečných webových aplikací.

Řešení problémů CORS v JavaScriptu pomocí Flask Backend

Kód frontendu JavaScript pomocí 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);
    });
  });
});

Nastavení CORS v baňce

Backendový kód Pythonu pomocí 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)

Řešení problémů CORS v JavaScriptu pomocí Flask Backend

Kód frontendu JavaScript pomocí 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);
    });
  });
});

Nastavení CORS v baňce

Backendový kód Pythonu pomocí 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)

Proč se problémy s CORS vyskytují v prohlížečích a ne v Postman

Jedním zásadním aspektem, který je třeba pochopit o Cross-Origin Resource Sharing (CORS), je bezpečnostní mechanismus, který prohlížeče implementují k ochraně uživatelů. Prohlížeče prosazují zásadu stejného původu, která brání webovým stránkám podávat požadavky na jinou doménu, než na které byla webová stránka obsluhována. Jedná se o bezpečnostní opatření, které má zabránit škodlivým webům v přístupu k citlivým informacím na jiných webech prostřednictvím JavaScriptu. Když zadáte požadavek XMLHttpRequest nebo požadavek na načtení z prohlížeče, zkontroluje se 'Access-Control-Allow-Origin' záhlaví v odpovědi ze serveru. Pokud tato hlavička není přítomna nebo nepovoluje žádající původ, prohlížeč požadavek zablokuje, což povede k chybě CORS.

Na druhou stranu Postman není prohlížeč, ale nástroj pro testování API. Nevynucuje zásady stejného původu, protože neběží v prostředí prohlížeče. Neprovádí tedy stejné bezpečnostní kontroly a umožňuje zasílání požadavků do libovolné domény bez omezení. To je důvod, proč nenarazíte na problémy s CORS, když používáte Postman ke stejnému požadavku. Pochopení tohoto rozdílu je pro vývojáře zásadní, aby mohli efektivně odstraňovat a řešit problémy související s CORS. Nakonfigurováním serveru tak, aby obsahoval příslušné hlavičky CORS, můžete zajistit, že vaše webová aplikace může komunikovat s externími rozhraními API bezpečně a bez chyb.

Běžné otázky a odpovědi o CORS a JavaScriptu

Co je CORS?
CORS je zkratka pro Cross-Origin Resource Sharing, což je mechanismus, který umožňuje vyžadovat omezené zdroje na webové stránce z jiné domény mimo doménu, ze které zdroj pochází.
Proč prohlížeče prosazují zásady stejného původu?
Zásady stejného původu jsou vynucovány k ochraně dat uživatelů a zabránění škodlivým webům v přístupu k citlivým informacím z jiných domén prostřednictvím JavaScriptu.
Proč Postman neprosazuje CORS?
Postman nevynucuje CORS, protože to není prohlížeč a neběží v prostředí prohlížeče, takže nemusí dodržovat zásady stejného původu.
Jak mohu vyřešit chybu CORS ve své webové aplikaci?
Chcete-li vyřešit chybu CORS, nakonfigurujte server tak, aby zahrnoval odpovídající 'Access-Control-Allow-Origin' hlavička v odpovědi, umožňující žádající původ.
Co dělá 'Access-Control-Allow-Origin' záhlaví udělat?
The 'Access-Control-Allow-Origin' hlavička určuje, které zdroje mají povolen přístup ke zdroji, což umožňuje požadavky na různé zdroje.
Jaký je účel withCredentials v XMLHttpRequest?
The withCredentials vlastnost označuje, zda mají být požadavky řízení přístupu mezi weby prováděny pomocí přihlašovacích údajů, jako jsou soubory cookie nebo autorizační hlavičky.
Proč se mi zobrazuje chyba CORS, i když můj server obsahuje 'Access-Control-Allow-Origin' záhlaví?
Stále se může zobrazit chyba CORS, pokud jsou vyžadována jiná záhlaví CORS, jako např 'Access-Control-Allow-Methods' nebo 'Access-Control-Allow-Headers', chybí nebo jsou nesprávně nakonfigurovány.
Mohu zakázat CORS ve svém prohlížeči?
Zakázání CORS v prohlížeči se nedoporučuje, protože to ohrožuje zabezpečení. Místo toho nakonfigurujte svůj server tak, aby správně zpracovával CORS.
Co je předletová žádost v CORS?
Předtiskový požadavek je počáteční požadavek provedený prohlížečem pomocí metody OPTIONS k určení, zda je odeslání skutečného požadavku bezpečné. Zkontroluje požadované hlavičky CORS na serveru.

Ukončení diskuse

Porozumění nuancím CORS a zásadám stejného původu je pro webové vývojáře zásadní. Zatímco prohlížeče vynucují přísná bezpečnostní opatření k ochraně uživatelů, nástroje jako Postman tato omezení obcházejí a usnadňují testování API. Správnou konfigurací backendu s nezbytnými hlavičkami CORS mohou vývojáři zajistit hladkou a bezpečnou komunikaci mezi frontendem a backendem. Řešení problémů CORS je zásadní pro vytváření funkčních a uživatelsky přívětivých webových aplikací.