Izpratne par CORS kļūdām programmā jQuery, bet ne pakalpojumā Postman

Arthur Petit

Ceturtdiena, 2024. gada 4. jūlijs 09:52:23

Kāpēc pārlūkprogrammās rodas CORS kļūdas?

Strādājot ar JavaScript, lai izveidotu savienojumu ar RESTful API, iespējams, tiks parādīta kļūda “Pieprasītajā resursā nav galvenes Access-Control-Allow-Origin”. Šī kļūda parasti rodas pārlūkprogrammas vienas izcelsmes politikas dēļ, kas ierobežo tīmekļa lapu pieprasījumu veikšanu citā domēnā, nevis tajā, kas apkalpoja tīmekļa lapu.

Interesanti, ka tad, kad tas pats pieprasījums tiek veikts, izmantojot tādus rīkus kā Postman, šāda kļūda nerodas. Šī atšķirība izstrādātājiem var būt mulsinoša. Izpratne par to, kāpēc CORS pārlūkprogrammā bloķē XMLHttpRequest vai fetch zvanus, bet ne pakalpojumā Postman, ir ļoti svarīgi problēmu novēršanai un drošu tīmekļa lietojumprogrammu izstrādei.

CORS problēmu risināšana JavaScript, izmantojot Flask aizmuguri

JavaScript priekšgala kods, izmantojot 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 iestatīšana kolbā

Python aizmugursistēmas kods, izmantojot kolbu

# 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 problēmu risināšana JavaScript, izmantojot Flask aizmuguri

JavaScript priekšgala kods, izmantojot 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 iestatīšana kolbā

Python aizmugursistēmas kods, izmantojot kolbu

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

Kāpēc CORS problēmas rodas pārlūkprogrammās, nevis pastniekā

Viens no svarīgākajiem aspektiem, kas jāsaprot par Cross-Origin Resource Sharing (CORS), ir drošības mehānisms, ko pārlūkprogrammas ievieš, lai aizsargātu lietotājus. Pārlūkprogrammas īsteno tās pašas izcelsmes politiku, kas neļauj tīmekļa lapām veikt pieprasījumus uz citu domēnu, nevis to, kas apkalpoja tīmekļa lapu. Šis ir drošības pasākums, lai neļautu ļaunprātīgām vietnēm piekļūt sensitīvai informācijai citās vietnēs, izmantojot JavaScript. Kad veicat XMLHttpRequest vai ienesat pieprasījumu no pārlūkprogrammas, tas pārbauda, vai 'Access-Control-Allow-Origin' galvene atbildē no servera. Ja šīs galvenes nav vai tā neatļauj pieprasījuma izcelsmi, pārlūkprogramma bloķēs pieprasījumu, kā rezultātā tiks parādīta CORS kļūda.

Savukārt Postman nav pārlūkprogramma, bet gan rīks API testēšanai. Tā neīsteno vienas izcelsmes politiku, jo tā nedarbojas pārlūkprogrammas vidē. Tāpēc tas neveic tādas pašas drošības pārbaudes un ļauj bez ierobežojumiem veikt pieprasījumus jebkuram domēnam. Tāpēc, izmantojot Postman, lai veiktu tādu pašu pieprasījumu, jūs nesaskaras ar CORS problēmām. Izstrādātājiem ir ļoti svarīgi saprast šo atšķirību, lai efektīvi novērstu un atrisinātu ar CORS saistītas problēmas. Konfigurējot serveri, lai iekļautu atbilstošās CORS galvenes, jūs varat nodrošināt, ka jūsu tīmekļa lietojumprogramma var droši un bez kļūdām sazināties ar ārējiem API.

Bieži uzdotie jautājumi un atbildes par CORS un JavaScript

Kas ir CORS?
CORS apzīmē Cross-Origin Resource Sharing — mehānismu, kas ļauj ierobežotus resursus tīmekļa lapā pieprasīt no cita domēna ārpus domēna, no kura resurss tika iegūts.
Kāpēc pārlūkprogrammas ievieš vienas un tās pašas izcelsmes politiku?
Tādas pašas izcelsmes politika tiek īstenota, lai aizsargātu lietotāju datus un neļautu ļaunprātīgām vietnēm piekļūt sensitīvai informācijai no citiem domēniem, izmantojot JavaScript.
Kāpēc Pastnieks neievieš CORS?
Pastnieks nepiemēro CORS, jo tā nav pārlūkprogramma un nedarbojas pārlūkprogrammas vidē, tāpēc tai nav jāatbilst tās pašas izcelsmes politikai.
Kā es varu novērst CORS kļūdu savā tīmekļa lietojumprogrammā?
Lai novērstu CORS kļūdu, konfigurējiet serveri, iekļaujot atbilstošo 'Access-Control-Allow-Origin' atbildes galveni, atļaujot pieprasījuma izcelsmi.
Ko dara 'Access-Control-Allow-Origin' galvene darīt?
The 'Access-Control-Allow-Origin' galvene norāda, kurām izcelsmēm ir atļauts piekļūt resursam, ļaujot veikt pārrobežu izcelsmes pieprasījumus.
Kāds ir mērķis withCredentials XMLHttpRequest?
The withCredentials rekvizīts norāda, vai starpvietņu piekļuves kontroles pieprasījumi ir jāveic, izmantojot akreditācijas datus, piemēram, sīkfailus vai autorizācijas galvenes.
Kāpēc tiek parādīts CORS kļūdas ziņojums, lai gan manā serverī ir iekļauta 'Access-Control-Allow-Origin' galvene?
Jūs joprojām varat saņemt CORS kļūdu, ja citas nepieciešamās CORS galvenes, piemēram, 'Access-Control-Allow-Methods' vai 'Access-Control-Allow-Headers', trūkst vai ir nepareizi konfigurēti.
Vai es varu atspējot CORS savā pārlūkprogrammā?
CORS atspējošana pārlūkprogrammā nav ieteicama, jo tas apdraud drošību. Tā vietā konfigurējiet savu serveri, lai pareizi apstrādātu CORS.
Kas ir pirmslidojuma pieprasījums pakalpojumā CORS?
Pirmspārbaudes pieprasījums ir pārlūkprogrammas sākotnējais pieprasījums, izmantojot metodi OPTIONS, lai noteiktu, vai faktiskais pieprasījums ir droši nosūtāms. Tas pārbauda, vai serverī nav vajadzīgās CORS galvenes.

Noslēdzot diskusiju

Tīmekļa izstrādātājiem ir svarīgi izprast CORS nianses un to pašu izcelsmes politiku. Lai gan pārlūkprogrammas ievieš stingrus drošības pasākumus, lai aizsargātu lietotājus, tādi rīki kā Postman apiet šos ierobežojumus, atvieglojot API testēšanu. Pareizi konfigurējot aizmugursistēmu ar nepieciešamajām CORS galvenēm, izstrādātāji var nodrošināt vienmērīgu un drošu komunikāciju starp priekšgalu un aizmugursistēmu. CORS problēmu risināšana ir ļoti svarīga, lai izveidotu funkcionālas un lietotājam draudzīgas tīmekļa lietojumprogrammas.