Κατανόηση των σφαλμάτων CORS στο jQuery αλλά όχι στο Postman

Arthur Petit

Πέμπτη, 4 Ιουλίου 2024 - 9:40:59 π.μ.

Γιατί εμφανίζονται σφάλματα CORS σε προγράμματα περιήγησης;

Όταν εργάζεστε με JavaScript για να συνδεθείτε σε ένα RESTful API, ενδέχεται να αντιμετωπίσετε ένα σφάλμα "Δεν υπάρχει κεφαλίδα "Access-Control-Allow-Origin" στον ζητούμενο πόρο". Αυτό το σφάλμα εμφανίζεται συνήθως λόγω της Πολιτικής ίδιας προέλευσης του προγράμματος περιήγησης, η οποία περιορίζει τις ιστοσελίδες από το να υποβάλλουν αιτήματα σε διαφορετικό τομέα από αυτόν που εξυπηρετούσε την ιστοσελίδα.

Είναι ενδιαφέρον ότι όταν το ίδιο αίτημα υποβάλλεται μέσω εργαλείων όπως ο Postman, δεν παρουσιάζεται τέτοιο σφάλμα. Αυτή η διαφορά μπορεί να είναι περίπλοκη για τους προγραμματιστές. Η κατανόηση του γιατί το XMLHttpRequest ή η ανάκτηση κλήσεων αποκλείονται από το CORS στο πρόγραμμα περιήγησης, αλλά όχι στο Postman, είναι ζωτικής σημασίας για την αντιμετώπιση προβλημάτων και την ανάπτυξη ασφαλών εφαρμογών ιστού.

Επίλυση προβλημάτων CORS σε JavaScript με το Flask Backend

JavaScript Frontend Code με χρήση 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 στο Flask

Python Backend Code με χρήση 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)

Επίλυση προβλημάτων CORS σε JavaScript με το Flask Backend

JavaScript Frontend Code με χρήση 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 στο Flask

Python Backend Code με χρήση 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)

Γιατί τα ζητήματα CORS εμφανίζονται στα προγράμματα περιήγησης και όχι στον ταχυδρόμο

Μια κρίσιμη πτυχή που πρέπει να κατανοήσετε σχετικά με το Cross-Origin Resource Sharing (CORS) είναι ο μηχανισμός ασφαλείας που εφαρμόζουν τα προγράμματα περιήγησης για την προστασία των χρηστών. Τα προγράμματα περιήγησης επιβάλλουν την Πολιτική ίδιας προέλευσης, η οποία εμποδίζει τις ιστοσελίδες να υποβάλλουν αιτήματα σε διαφορετικό τομέα από αυτόν που εξυπηρετούσε την ιστοσελίδα. Αυτό είναι ένα μέτρο ασφαλείας για την αποτροπή πρόσβασης κακόβουλων ιστότοπων σε ευαίσθητες πληροφορίες σε άλλους ιστότοπους μέσω JavaScript. Όταν κάνετε ένα αίτημα XMLHttpRequest ή ανάκτηση από ένα πρόγραμμα περιήγησης, ελέγχει για το 'Access-Control-Allow-Origin' κεφαλίδα στην απάντηση από τον διακομιστή. Εάν αυτή η κεφαλίδα δεν υπάρχει ή δεν επιτρέπει την προέλευση του αιτήματος, το πρόγραμμα περιήγησης θα αποκλείσει το αίτημα, με αποτέλεσμα ένα σφάλμα CORS.

Ο Postman, από την άλλη, δεν είναι πρόγραμμα περιήγησης αλλά εργαλείο δοκιμής API. Δεν επιβάλλει την Πολιτική ίδιας προέλευσης επειδή δεν εκτελείται στο περιβάλλον του προγράμματος περιήγησης. Επομένως, δεν εκτελεί τους ίδιους ελέγχους ασφαλείας και επιτρέπει την υποβολή αιτημάτων σε οποιονδήποτε τομέα χωρίς περιορισμούς. Αυτός είναι ο λόγος για τον οποίο δεν αντιμετωπίζετε προβλήματα CORS όταν χρησιμοποιείτε τον Postman για να υποβάλετε το ίδιο αίτημα. Η κατανόηση αυτής της διαφοράς είναι ζωτικής σημασίας για τους προγραμματιστές να αντιμετωπίσουν και να επιλύσουν αποτελεσματικά ζητήματα που σχετίζονται με το CORS. Διαμορφώνοντας τις παραμέτρους του διακομιστή ώστε να περιλαμβάνει τις κατάλληλες κεφαλίδες CORS, μπορείτε να διασφαλίσετε ότι η εφαρμογή Ιστού σας μπορεί να επικοινωνεί με εξωτερικά API με ασφάλεια και χωρίς σφάλματα.

Συνήθεις ερωτήσεις και απαντήσεις σχετικά με το CORS και το JavaScript

Τι είναι το CORS;
Το CORS σημαίνει Cross-Origin Resource Sharing, ένας μηχανισμός που επιτρέπει την αίτηση περιορισμένων πόρων σε μια ιστοσελίδα από έναν άλλο τομέα εκτός του τομέα από τον οποίο προέρχεται ο πόρος.
Γιατί τα προγράμματα περιήγησης επιβάλλουν την Πολιτική ίδιας προέλευσης;
Η Πολιτική ίδιας προέλευσης επιβάλλεται για την προστασία των δεδομένων των χρηστών και την αποτροπή της πρόσβασης κακόβουλων ιστότοπων σε ευαίσθητες πληροφορίες από άλλους τομείς μέσω JavaScript.
Γιατί ο Ταχυδρόμος δεν επιβάλλει το CORS;
Το Postman δεν επιβάλλει το CORS επειδή δεν είναι πρόγραμμα περιήγησης και δεν εκτελείται σε περιβάλλον προγράμματος περιήγησης, επομένως δεν χρειάζεται να συμμορφώνεται με την Πολιτική ίδιας προέλευσης.
Πώς μπορώ να επιλύσω ένα σφάλμα CORS στην εφαρμογή web μου;
Για να επιλύσετε ένα σφάλμα CORS, ρυθμίστε τις παραμέτρους του διακομιστή ώστε να περιλαμβάνει το κατάλληλο 'Access-Control-Allow-Origin' κεφαλίδα στην απάντηση, επιτρέποντας την προέλευση αιτήματος.
Τι κάνει το 'Access-Control-Allow-Origin' κεφαλίδα κάνω;
ο 'Access-Control-Allow-Origin' Η κεφαλίδα καθορίζει ποιες προελεύσεις επιτρέπεται να έχουν πρόσβαση στον πόρο, επιτρέποντας αιτήματα πολλαπλής προέλευσης.
Ποιος είναι ο σκοπός του withCredentials στο XMLHttpRequest;
ο withCredentials Η ιδιότητα υποδεικνύει εάν θα πρέπει να γίνονται αιτήματα ελέγχου πρόσβασης μεταξύ τοποθεσιών χρησιμοποιώντας διαπιστευτήρια, όπως cookie ή κεφαλίδες εξουσιοδότησης.
Γιατί λαμβάνω ένα σφάλμα CORS παρόλο που ο διακομιστής μου περιλαμβάνει το 'Access-Control-Allow-Origin' επί κεφαλής;
Ενδέχεται να λάβετε ένα σφάλμα CORS εάν άλλες απαιτούμενες κεφαλίδες CORS, όπως π.χ 'Access-Control-Allow-Methods' ή 'Access-Control-Allow-Headers', λείπουν ή έχουν ρυθμιστεί εσφαλμένα.
Μπορώ να απενεργοποιήσω το CORS στο πρόγραμμα περιήγησής μου;
Η απενεργοποίηση του CORS σε ένα πρόγραμμα περιήγησης δεν συνιστάται, καθώς θέτει σε κίνδυνο την ασφάλεια. Αντίθετα, διαμορφώστε τον διακομιστή σας ώστε να χειρίζεται σωστά το CORS.
Τι είναι ένα αίτημα πριν από την πτήση στο CORS;
Ένα αίτημα πριν από την πτήση είναι ένα αρχικό αίτημα που υποβάλλεται από το πρόγραμμα περιήγησης χρησιμοποιώντας τη μέθοδο OPTIONS για να προσδιορίσει εάν το πραγματικό αίτημα είναι ασφαλές για αποστολή. Ελέγχει για τις απαιτούμενες κεφαλίδες CORS στον διακομιστή.

Ολοκληρώνοντας τη συζήτηση

Η κατανόηση των αποχρώσεων του CORS και της Πολιτικής Ίδιας Προέλευσης είναι απαραίτητη για τους προγραμματιστές ιστού. Ενώ τα προγράμματα περιήγησης επιβάλλουν αυστηρά μέτρα ασφαλείας για την προστασία των χρηστών, εργαλεία όπως το Postman παρακάμπτουν αυτούς τους περιορισμούς, διευκολύνοντας τη δοκιμή των API. Με τη σωστή διαμόρφωση του backend με τις απαραίτητες κεφαλίδες CORS, οι προγραμματιστές μπορούν να εξασφαλίσουν ομαλή και ασφαλή επικοινωνία μεταξύ του frontend και του backend. Η αντιμετώπιση προβλημάτων CORS είναι ζωτικής σημασίας για τη δημιουργία λειτουργικών και φιλικών προς το χρήστη εφαρμογών ιστού.