Razumevanje napak CORS v jQuery, ne pa tudi v Postmanu

Arthur Petit

četrtek, 04. julij 2024 10:08:34

Zakaj se v brskalnikih pojavljajo napake CORS?

Ko delate z JavaScriptom za povezavo z API-jem RESTful, lahko naletite na napako »Na zahtevanem viru ni glave 'Access-Control-Allow-Origin'«. Do te napake običajno pride zaradi brskalnikovega pravilnika o istem izvoru, ki spletnim stranem omejuje pošiljanje zahtev v domeno, ki ni tista, ki je služila spletni strani.

Zanimivo je, da se takšna napaka ne pojavi, ko je ista zahteva podana prek orodij, kot je Postman. Ta razlika je lahko za razvijalce zmedena. Razumevanje, zakaj klice XMLHttpRequest ali pridobivanje blokira CORS v brskalniku, ne pa tudi v Postmanu, je ključnega pomena za odpravljanje težav in razvoj varnih spletnih aplikacij.

Reševanje težav CORS v JavaScriptu z zaledjem Flask

Koda JavaScript Frontend z uporabo 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);
    });
  });
});

Nastavitev CORS v Flasku

Zaledna koda Python z uporabo 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)

Reševanje težav CORS v JavaScriptu z zaledjem Flask

Koda JavaScript Frontend z uporabo 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);
    });
  });
});

Nastavitev CORS v Flasku

Zaledna koda Python z uporabo 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)

Zakaj se težave s CORS pojavljajo v brskalnikih in ne v poštarju

Eden ključnih vidikov, ki jih je treba razumeti pri skupni rabi virov navzkrižnega izvora (CORS), je varnostni mehanizem, ki ga brskalniki izvajajo za zaščito uporabnikov. Brskalniki uveljavljajo politiko istega izvora, ki spletnim stranem preprečuje, da bi zahtevale drugo domeno od tiste, ki je služila spletni strani. To je varnostni ukrep, ki zlonamernim spletnim mestom preprečuje dostop do občutljivih podatkov na drugih spletnih mestih prek JavaScripta. Ko naredite XMLHttpRequest ali pridobite zahtevo iz brskalnika, preveri, ali je 'Access-Control-Allow-Origin' glavo v odgovoru strežnika. Če ta glava ni prisotna ali ne dovoljuje izvora zahteve, bo brskalnik blokiral zahtevo, kar bo povzročilo napako CORS.

Po drugi strani pa Postman ni brskalnik, temveč orodje za testiranje API-jev. Ne uveljavlja pravilnika istega izvora, ker se ne izvaja v okolju brskalnika. Zato ne izvaja enakih varnostnih pregledov in omogoča pošiljanje zahtev na katero koli domeno brez omejitev. Zato ne naletite na težave s CORS, ko uporabite Postman za isto zahtevo. Razumevanje te razlike je za razvijalce ključnega pomena za učinkovito odpravljanje in reševanje težav, povezanih s CORS. Če konfigurirate strežnik tako, da vključuje ustrezne glave CORS, lahko zagotovite, da lahko vaša spletna aplikacija varno in brez napak komunicira z zunanjimi API-ji.

Pogosta vprašanja in odgovori o CORS in JavaScript

Kaj je CORS?
CORS je kratica za Cross-Origin Resource Sharing, mehanizem, ki omogoča, da se omejeni viri na spletni strani zahtevajo iz druge domene zunaj domene, iz katere izvira vir.
Zakaj brskalniki uveljavljajo politiko istega izvora?
Politika istega izvora je uveljavljena za zaščito podatkov uporabnikov in preprečevanje dostopa zlonamernih spletnih mest do občutljivih informacij iz drugih domen prek JavaScripta.
Zakaj Postman ne uveljavi CORS?
Postman ne uveljavlja CORS-a, ker ni brskalnik in se ne izvaja v okolju brskalnika, zato mu ni treba upoštevati pravilnika o istem izvoru.
Kako lahko odpravim napako CORS v svoji spletni aplikaciji?
Če želite odpraviti napako CORS, konfigurirajte strežnik tako, da vključuje ustrezne 'Access-Control-Allow-Origin' glavo v odgovoru, ki omogoča izvor zahteve.
Kaj pomeni 'Access-Control-Allow-Origin' glava narediti?
The 'Access-Control-Allow-Origin' določa, katerim izvorom je dovoljen dostop do vira, kar omogoča navzkrižne zahteve izvorov.
Kaj je namen withCredentials v XMLHttpRequest?
The withCredentials Lastnost označuje, ali naj se zahteve za nadzor dostopa med spletnimi mesti izvedejo z uporabo poverilnic, kot so piškotki ali avtorizacijske glave.
Zakaj dobim napako CORS, čeprav moj strežnik vključuje 'Access-Control-Allow-Origin' glava?
Še vedno lahko dobite napako CORS, če druge zahtevane glave CORS, kot npr 'Access-Control-Allow-Methods' oz 'Access-Control-Allow-Headers', manjkajo ali so nepravilno konfigurirani.
Ali lahko onemogočim CORS v brskalniku?
Onemogočanje CORS v brskalniku ni priporočljivo, saj ogroža varnost. Namesto tega konfigurirajte svoj strežnik za pravilno obdelavo CORS.
Kaj je zahteva pred letom v CORS?
Zahteva pred tiskom je začetna zahteva, ki jo brskalnik izvede z metodo OPTIONS, da ugotovi, ali je dejanska zahteva varna za pošiljanje. Preveri zahtevane glave CORS na strežniku.

Zaključek razprave

Razumevanje odtenkov CORS in politike istega izvora je bistvenega pomena za spletne razvijalce. Medtem ko brskalniki izvajajo stroge varnostne ukrepe za zaščito uporabnikov, orodja, kot je Postman, obidejo te omejitve in olajšajo testiranje API-jev. S pravilno konfiguracijo zaledja s potrebnimi glavami CORS lahko razvijalci zagotovijo gladko in varno komunikacijo med sprednjim in zalednim delom. Obravnavanje vprašanj CORS je ključnega pomena za ustvarjanje funkcionalnih in uporabniku prijaznih spletnih aplikacij.