Pochopenie chýb CORS v jQuery, ale nie v Postman

Pochopenie chýb CORS v jQuery, ale nie v Postman
Arthur Petit
štvrtok 4. júla 2024, 10:07:15
JavaScript

Prečo sa v prehliadačoch vyskytujú chyby CORS?

Pri práci s JavaScriptom na pripojenie k RESTful API sa môžete stretnúť s chybou „Na požadovanom zdroji nie je prítomná hlavička „Access-Control-Allow-Origin“. Táto chyba sa bežne vyskytuje v dôsledku zásady rovnakého pôvodu prehliadača, ktorá bráni webovým stránkam odosielať požiadavky na inú doménu, než na ktorej bola daná webová stránka obsluhovaná.

Je zaujímavé, že keď je rovnaká požiadavka vykonaná prostredníctvom nástrojov ako Postman, žiadna takáto chyba sa nevyskytuje. Tento rozdiel môže byť pre vývojárov mätúci. Pochopenie toho, prečo sú volania XMLHttpRequest alebo načítanie blokované pomocou CORS v prehliadači, ale nie v Postman, je kľúčové pre riešenie problémov a vývoj bezpečných webových aplikácií.

Riešenie problémov CORS v JavaScripte pomocou Flask Backend

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

Nastavenie CORS vo fľaši

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

Riešenie problémov CORS v JavaScripte pomocou Flask Backend

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

Nastavenie CORS vo fľaši

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

Prečo sa problémy s CORS vyskytujú v prehliadačoch a nie v Postman

Jedným kľúčovým aspektom, ktorý treba pochopiť o zdieľaní zdrojov medzi zdrojmi (CORS), je bezpečnostný mechanizmus, ktorý prehliadače implementujú na ochranu používateľov. Prehliadače presadzujú zásady rovnakého pôvodu, ktoré bránia webovým stránkam odosielať požiadavky na inú doménu, než na ktorú bola webová stránka obsluhovaná. Ide o bezpečnostné opatrenie, ktoré má zabrániť škodlivým webovým stránkam v prístupe k citlivým informáciám na iných webových stránkach prostredníctvom JavaScriptu. Keď zadáte požiadavku XMLHttpRequest alebo požiadavku na načítanie z prehliadača, prehliadač skontroluje, či obsahuje 'Access-Control-Allow-Origin' hlavičky v odpovedi zo servera. Ak táto hlavička nie je prítomná alebo nepovoľuje požadujúci pôvod, prehliadač zablokuje požiadavku, čo bude mať za následok chybu CORS.

Na druhej strane Postman nie je prehliadač, ale nástroj na testovanie API. Nevynucuje politiku rovnakého pôvodu, pretože nie je spustená v prostredí prehliadača. Preto nevykonáva rovnaké bezpečnostné kontroly a umožňuje bez obmedzení posielať požiadavky na akúkoľvek doménu. To je dôvod, prečo sa nestretnete s problémami CORS, keď použijete Postman na zadanie rovnakej požiadavky. Pochopenie tohto rozdielu je pre vývojárov kľúčové, aby mohli efektívne riešiť problémy súvisiace s CORS. Konfiguráciou servera tak, aby obsahoval príslušné hlavičky CORS, môžete zaistiť, aby vaša webová aplikácia mohla komunikovať s externými rozhraniami API bezpečne a bez chýb.

Bežné otázky a odpovede o CORS a JavaScripte

  1. čo je CORS?
  2. CORS je skratka pre Cross-Origin Resource Sharing, mechanizmus, ktorý umožňuje vyžiadanie obmedzených zdrojov na webovej stránke z inej domény mimo domény, z ktorej zdroj pochádza.
  3. Prečo prehliadače presadzujú zásady rovnakého pôvodu?
  4. Zásady rovnakého pôvodu sú presadzované s cieľom chrániť údaje používateľov a zabrániť škodlivým webovým stránkam v prístupe k citlivým informáciám z iných domén prostredníctvom JavaScriptu.
  5. Prečo Postman nepresadzuje CORS?
  6. Postman nevynucuje CORS, pretože to nie je prehliadač a nebeží v prostredí prehliadača, takže nemusí dodržiavať zásady rovnakého pôvodu.
  7. Ako môžem vyriešiť chybu CORS v mojej webovej aplikácii?
  8. Ak chcete vyriešiť chybu CORS, nakonfigurujte server tak, aby obsahoval príslušné 'Access-Control-Allow-Origin' hlavička v odpovedi, ktorá umožňuje požadujúci pôvod.
  9. Čo robí 'Access-Control-Allow-Origin' hlavička robiť?
  10. The 'Access-Control-Allow-Origin' hlavička určuje, ktoré zdroje majú povolený prístup k prostriedku, čím umožňujú požiadavky na krížový pôvod.
  11. Aký je účel withCredentials v XMLHttpRequest?
  12. The withCredentials vlastnosť označuje, či by sa požiadavky kontroly prístupu medzi lokalitami mali alebo nemali vykonávať pomocou poverení, ako sú súbory cookie alebo autorizačné hlavičky.
  13. Prečo sa mi zobrazuje chyba CORS, aj keď môj server obsahuje 'Access-Control-Allow-Origin' hlavička?
  14. Chyba CORS sa môže zobraziť aj vtedy, ak iné požadované hlavičky CORS, ako napr 'Access-Control-Allow-Methods' alebo 'Access-Control-Allow-Headers', chýbajú alebo sú nesprávne nakonfigurované.
  15. Môžem vypnúť CORS vo svojom prehliadači?
  16. Zakázanie CORS v prehliadači sa neodporúča, pretože to ohrozuje bezpečnosť. Namiesto toho nakonfigurujte svoj server tak, aby správne spracovával CORS.
  17. Čo je predletová požiadavka v CORS?
  18. Požiadavka na kontrolu pred výstupom je počiatočná požiadavka uskutočnená prehliadačom pomocou metódy OPTIONS na určenie, či je odoslanie skutočnej požiadavky bezpečné. Kontroluje požadované hlavičky CORS na serveri.

Ukončenie diskusie

Pochopenie nuancií CORS a zásady rovnakého pôvodu je pre webových vývojárov nevyhnutné. Zatiaľ čo prehliadače presadzujú prísne bezpečnostné opatrenia na ochranu používateľov, nástroje ako Postman obchádzajú tieto obmedzenia a uľahčujú testovanie API. Správnou konfiguráciou backendu s potrebnými hlavičkami CORS môžu vývojári zabezpečiť hladkú a bezpečnú komunikáciu medzi frontendom a backendom. Riešenie problémov CORS je kľúčové pre vytváranie funkčných a užívateľsky prívetivých webových aplikácií.