Razumijevanje pogrešaka CORS-a u jQueryju, ali ne iu Postmanu

Razumijevanje pogrešaka CORS-a u jQueryju, ali ne iu Postmanu
Arthur Petit
četvrtak, 4. srpnja 2024. u 09:32:21
JavaScript

Zašto se CORS pogreške pojavljuju u preglednicima?

Kada radite s JavaScriptom za povezivanje s RESTful API-jem, mogli biste naići na pogrešku "Nije prisutno zaglavlje 'Access-Control-Allow-Origin' na traženom resursu". Ova se pogreška obično događa zbog pravila istog podrijetla preglednika, koja web-stranicama onemogućuje upućivanje zahtjeva domeni različitoj od one koja je poslužila web-stranicu.

Zanimljivo je da se takva pogreška ne pojavljuje kada se isti zahtjev uputi putem alata poput Postmana. Ova razlika može biti zbunjujuća za programere. Razumijevanje zašto XMLHttpRequest ili fetch pozive blokira CORS u pregledniku, ali ne iu Postmanu, ključno je za rješavanje problema i razvoj sigurnih web aplikacija.

Rješavanje problema s CORS-om u JavaScriptu s pozadinom Flaska

JavaScript prednji kod pomoću jQueryja

// 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);
    });
  });
});

Postavljanje CORS-a u Flasku

Python pozadinski kod pomoću Flaska

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

Rješavanje problema s CORS-om u JavaScriptu s pozadinom Flaska

JavaScript prednji kod pomoću jQueryja

// 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);
    });
  });
});

Postavljanje CORS-a u Flasku

Python pozadinski kod pomoću Flaska

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

Zašto se problemi s CORS-om pojavljuju u preglednicima, a ne u poštaru

Jedan ključni aspekt koji treba razumjeti o zajedničkom dijeljenju resursa (CORS) je sigurnosni mehanizam koji preglednici implementiraju kako bi zaštitili korisnike. Preglednici provode Pravila istog podrijetla, koja sprječavaju web-stranice da upućuju zahtjeve domeni različitoj od one koja je poslužila web-stranicu. Ovo je sigurnosna mjera za sprječavanje zlonamjernih web stranica od pristupa osjetljivim informacijama na drugim web stranicama putem JavaScripta. Kada napravite XMLHttpRequest ili zahtjev za dohvaćanje iz preglednika, on provjerava postoji li 'Access-Control-Allow-Origin' zaglavlje u odgovoru poslužitelja. Ako ovo zaglavlje nije prisutno ili ne dopušta izvor zahtjeva, preglednik će blokirati zahtjev, što će rezultirati CORS pogreškom.

Postman, s druge strane, nije preglednik već alat za testiranje API-ja. Ne provodi Pravila istog porijekla jer se ne izvodi unutar okruženja preglednika. Stoga ne provodi iste sigurnosne provjere i dopušta slanje zahtjeva bilo kojoj domeni bez ograničenja. Zbog toga se ne susrećete s problemima s CORS-om kada koristite Postmana za slanje istog zahtjeva. Razumijevanje ove razlike ključno je za programere kako bi učinkovito riješili probleme povezane s CORS-om. Konfiguriranjem poslužitelja da uključuje odgovarajuća CORS zaglavlja, možete osigurati da vaša web aplikacija može komunicirati s vanjskim API-jima sigurno i bez pogrešaka.

Uobičajena pitanja i odgovori o CORS-u i JavaScriptu

  1. Što je CORS?
  2. CORS je kratica za Cross-Origin Resource Sharing, mehanizam koji omogućuje da se ograničeni resursi na web-stranici zatraže od druge domene izvan domene iz koje izvor potječe.
  3. Zašto preglednici provode Politiku istog porijekla?
  4. Politika istog podrijetla provodi se kako bi se zaštitili podaci korisnika i spriječilo zlonamjerne web stranice da pristupe osjetljivim informacijama s drugih domena putem JavaScripta.
  5. Zašto Postman ne provodi CORS?
  6. Postman ne provodi CORS jer nije preglednik i ne radi u okruženju preglednika, tako da se ne mora pridržavati Pravila istog porijekla.
  7. Kako mogu riješiti CORS pogrešku u svojoj web aplikaciji?
  8. Da biste riješili CORS pogrešku, konfigurirajte poslužitelj tako da uključuje odgovarajuće 'Access-Control-Allow-Origin' zaglavlje u odgovoru, dopuštajući izvor zahtjeva.
  9. Što to 'Access-Control-Allow-Origin' zaglavlje učiniti?
  10. The 'Access-Control-Allow-Origin' zaglavlje navodi kojim izvorima je dopušten pristup resursu, omogućujući zahtjeve s različitim izvorima.
  11. Koja je svrha withCredentials u XMLHttpRequest?
  12. The withCredentials svojstvo označava trebaju li se ili ne zahtjevi za kontrolu pristupa između web-mjesta postavljati korištenjem vjerodajnica kao što su kolačići ili autorizacijska zaglavlja.
  13. Zašto dobivam CORS grešku iako moj poslužitelj uključuje 'Access-Control-Allow-Origin' Zaglavlje?
  14. Još uvijek možete dobiti CORS pogrešku ako druga potrebna CORS zaglavlja, kao što je 'Access-Control-Allow-Methods' ili 'Access-Control-Allow-Headers', nedostaju ili su neispravno konfigurirani.
  15. Mogu li onemogućiti CORS u svom pregledniku?
  16. Onemogućavanje CORS-a u pregledniku se ne preporučuje jer ugrožava sigurnost. Umjesto toga, konfigurirajte svoj poslužitelj da pravilno rukuje CORS-om.
  17. Što je zahtjev prije leta u CORS-u?
  18. Zahtjev prije leta je inicijalni zahtjev koji postavlja preglednik pomoću metode OPTIONS kako bi se utvrdilo je li stvarni zahtjev siguran za slanje. Provjerava potrebna CORS zaglavlja na poslužitelju.

Završetak rasprave

Razumijevanje nijansi CORS-a i Politike istog porijekla ključno je za web programere. Dok preglednici provode stroge sigurnosne mjere za zaštitu korisnika, alati poput Postmana zaobilaze ta ograničenja, olakšavajući testiranje API-ja. Ispravnim konfiguriranjem pozadine s potrebnim CORS zaglavljima, programeri mogu osigurati glatku i sigurnu komunikaciju između sučelja i pozadine. Rješavanje problema CORS-a ključno je za stvaranje funkcionalnih web aplikacija koje su jednostavne za korištenje.