CORS klaidų supratimas „jQuery“, bet ne „Postman“.

Arthur Petit

2024 m. liepos 4 d., ketvirtadienis 09:53:35

Kodėl naršyklėse atsiranda CORS klaidos?

Dirbdami su „JavaScript“, kad prisijungtumėte prie RESTful API, galite susidurti su klaidos pranešimu „Prašytame šaltinyje nėra antraštės Access-Control-Allow-Origin“. Ši klaida dažniausiai įvyksta dėl naršyklės tos pačios kilmės politikos, kuri apriboja tinklalapių užklausas į kitą domeną nei tas, kuris aptarnavo tinklalapį.

Įdomu tai, kad kai ta pati užklausa pateikiama naudojant tokius įrankius kaip „Postman“, tokia klaida neįvyksta. Šis skirtumas kūrėjams gali būti gluminantis. Suprasti, kodėl „XMLHttpRequest“ arba „Ftch“ skambučius blokuoja CORS naršyklėje, bet ne „Postman“, labai svarbu šalinant triktis ir kuriant saugias žiniatinklio programas.

CORS problemų sprendimas „JavaScript“ naudojant „Flask Backend“.

„JavaScript“ sąsajos kodas naudojant „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);
    });
  });
});

CORS nustatymas kolboje

Python Backend kodas naudojant kolbą

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

CORS problemų sprendimas „JavaScript“ naudojant „Flask Backend“.

„JavaScript“ sąsajos kodas naudojant „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);
    });
  });
});

CORS nustatymas kolboje

Python Backend kodas naudojant kolbą

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

Kodėl CORS problemos kyla naršyklėse, o ne „Postman“.

Vienas iš esminių aspektų, kuriuos reikia suprasti naudojant Cross-Origin Resource Sharing (CORS), yra saugumo mechanizmas, kurį naršyklės įdiegia siekdamos apsaugoti vartotojus. Naršyklės įgyvendina tos pačios kilmės politiką, kuri neleidžia tinklalapiams pateikti užklausų kitam domenui nei tas, kuris aptarnavo tinklalapį. Tai yra saugos priemonė, neleidžianti kenkėjiškoms svetainėms per „JavaScript“ pasiekti neskelbtinos informacijos kitose svetainėse. Kai pateikiate XMLHttpRequest arba gaunate užklausą iš naršyklės, ji patikrina, ar 'Access-Control-Allow-Origin' atsakymo iš serverio antraštę. Jei šios antraštės nėra arba ji neleidžia pateikti užklausos šaltinio, naršyklė užblokuos užklausą ir sukels CORS klaidą.

Kita vertus, „Postman“ yra ne naršyklė, o API testavimo įrankis. Ji neįgyvendina tos pačios kilmės politikos, nes ji neveikia naršyklės aplinkoje. Todėl ji neatlieka tų pačių saugumo patikrų ir leidžia be apribojimų pateikti užklausas bet kuriam domenui. Štai kodėl nesusiduriate su CORS problemomis, kai naudojate „Postman“, kad pateiktumėte tą pačią užklausą. Suprasti šį skirtumą labai svarbu, kad kūrėjai galėtų veiksmingai pašalinti ir išspręsti su CORS susijusias problemas. Konfigūruodami serverį, kad būtų įtrauktos atitinkamos CORS antraštės, galite užtikrinti, kad jūsų žiniatinklio programa galėtų saugiai ir be klaidų susisiekti su išorinėmis API.

Dažni klausimai ir atsakymai apie CORS ir JavaScript

Kas yra CORS?
CORS reiškia Cross-Origin Resource Sharing – mechanizmą, leidžiantį užklausą dėl apribotų tinklalapio išteklių iš kito domeno, nepriklausančio domenui, iš kurio kilo išteklius.
Kodėl naršyklės įgyvendina tos pačios kilmės politiką?
Tos pačios kilmės politika taikoma siekiant apsaugoti naudotojų duomenis ir neleisti kenkėjiškoms svetainėms pasiekti neskelbtinos informacijos iš kitų domenų per „JavaScript“.
Kodėl paštininkas nevykdo CORS?
Postman neįgyvendina CORS, nes tai nėra naršyklė ir neveikia naršyklės aplinkoje, todėl jai nereikia laikytis tos pačios kilmės politikos.
Kaip galiu išspręsti CORS klaidą savo žiniatinklio programoje?
Norėdami išspręsti CORS klaidą, sukonfigūruokite serverį įtraukdami atitinkamą 'Access-Control-Allow-Origin' atsakymo antraštę, leidžiančią užklausos kilmę.
Ką daro 'Access-Control-Allow-Origin' antraštė daryti?
The 'Access-Control-Allow-Origin' antraštė nurodo, kurioms šaltiniams leidžiama pasiekti išteklius, įgalinant kryžmines kilmės užklausas.
Koks tikslas withCredentials XMLHttpRequest?
The withCredentials ypatybė nurodo, ar kelių svetainių prieigos valdymo užklausos turi būti pateiktos naudojant kredencialus, pvz., slapukus arba prieigos teisės antraštes.
Kodėl gaunu CORS klaidą, nors mano serveryje yra 'Access-Control-Allow-Origin' antraštė?
Vis tiek galite gauti CORS klaidą, jei kitos reikalingos CORS antraštės, pvz., 'Access-Control-Allow-Methods' arba 'Access-Control-Allow-Headers', nėra arba jie neteisingai sukonfigūruoti.
Ar galiu išjungti CORS savo naršyklėje?
Nerekomenduojama išjungti CORS naršyklėje, nes tai kenkia saugumui. Vietoj to, sukonfigūruokite savo serverį tinkamai tvarkyti CORS.
Kas yra išankstinio patikrinimo užklausa CORS?
Išankstinio patikrinimo užklausa yra pradinė užklausa, kurią naršyklė pateikia naudodama OPTIONS metodą, kad nustatytų, ar tikrąją užklausą saugu siųsti. Jis patikrina, ar serveryje nėra reikalingų CORS antraščių.

Diskusijos pabaiga

Žiniatinklio kūrėjams labai svarbu suprasti CORS niuansus ir tą pačią kilmės politiką. Nors naršyklės taiko griežtas saugos priemones, kad apsaugotų vartotojus, tokie įrankiai kaip „Postman“ apeina šiuos apribojimus, todėl lengviau išbandyti API. Tinkamai sukonfigūravę užpakalinę dalį su būtinomis CORS antraštėmis, kūrėjai gali užtikrinti sklandų ir saugų ryšį tarp sąsajos ir užpakalinės sistemos. CORS problemų sprendimas yra labai svarbus kuriant funkcionalias ir patogias žiniatinklio programas.