Memahami Ralat CORS dalam jQuery tetapi Tidak dalam Posmen

Arthur Petit

Khamis, 4 Julai 2024 9:54:50 PG

Mengapa Ralat CORS Berlaku dalam Pelayar?

Apabila bekerja dengan JavaScript untuk menyambung ke API RESTful, anda mungkin menghadapi ralat "Tiada pengepala 'Access-Control-Allow-Origin' pada sumber yang diminta". Ralat ini biasanya berlaku disebabkan oleh Dasar Asal Yang Sama penyemak imbas, yang mengehadkan halaman web daripada membuat permintaan ke domain yang berbeza daripada yang menyediakan halaman web.

Menariknya, apabila permintaan yang sama dibuat melalui alat seperti Posman, tiada ralat sedemikian berlaku. Perbezaan ini boleh membingungkan pembangun. Memahami sebab XMLHttpRequest atau ambil panggilan disekat oleh CORS dalam penyemak imbas, tetapi tidak dalam Postman, adalah penting untuk menyelesaikan masalah dan membangunkan aplikasi web yang selamat.

Menyelesaikan Isu CORS dalam JavaScript dengan Flask Backend

Kod Hadapan JavaScript Menggunakan 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);
    });
  });
});

Menyediakan CORS dalam Flask

Kod Backend Python Menggunakan 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)

Menyelesaikan Isu CORS dalam JavaScript dengan Flask Backend

Kod Hadapan JavaScript Menggunakan 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);
    });
  });
});

Menyediakan CORS dalam Flask

Kod Backend Python Menggunakan 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)

Mengapa Isu CORS Berlaku dalam Pelayar dan Bukan dalam Posmen

Satu aspek penting untuk difahami tentang Perkongsian Sumber Silang Asal (CORS) ialah mekanisme keselamatan yang pelayar laksanakan untuk melindungi pengguna. Penyemak imbas menguatkuasakan Dasar Asal Sama, yang menghalang halaman web daripada membuat permintaan ke domain yang berbeza daripada yang menyediakan halaman web. Ini adalah langkah keselamatan untuk menghalang tapak web berniat jahat daripada mengakses maklumat sensitif di tapak web lain melalui JavaScript. Apabila anda membuat XMLHttpRequest atau mengambil permintaan daripada penyemak imbas, ia menyemak untuk 'Access-Control-Allow-Origin' pengepala dalam respons daripada pelayan. Jika pengepala ini tidak hadir atau tidak membenarkan asal yang meminta, penyemak imbas akan menyekat permintaan, mengakibatkan ralat CORS.

Posmen, sebaliknya, bukan pelayar tetapi alat untuk menguji API. Ia tidak menguatkuasakan Dasar Asal Sama kerana ia tidak berjalan dalam persekitaran penyemak imbas. Oleh itu, ia tidak melakukan semakan keselamatan yang sama dan membenarkan permintaan dibuat ke mana-mana domain tanpa sekatan. Inilah sebabnya anda tidak menghadapi isu CORS apabila menggunakan Posmen untuk membuat permintaan yang sama. Memahami perbezaan ini adalah penting bagi pembangun untuk menyelesaikan masalah dan menyelesaikan isu berkaitan CORS dengan berkesan. Dengan mengkonfigurasi pelayan untuk memasukkan pengepala CORS yang sesuai, anda boleh memastikan bahawa aplikasi web anda boleh berkomunikasi dengan API luaran dengan selamat dan tanpa ralat.

Soalan dan Jawapan Biasa Mengenai CORS dan JavaScript

Apakah itu CORS?
CORS bermaksud Perkongsian Sumber Silang Asal, mekanisme yang membenarkan sumber terhad pada halaman web diminta daripada domain lain di luar domain dari mana sumber itu berasal.
Mengapakah pelayar menguatkuasakan Dasar Asal Sama?
Dasar Same-Origin dikuatkuasakan untuk melindungi data pengguna dan menghalang tapak web berniat jahat daripada mengakses maklumat sensitif daripada domain lain melalui JavaScript.
Mengapa Posmen tidak menguatkuasakan CORS?
Posmen tidak menguatkuasakan CORS kerana ia bukan penyemak imbas dan tidak berjalan dalam persekitaran penyemak imbas, jadi ia tidak perlu mematuhi Dasar Asal Sama.
Bagaimanakah saya boleh menyelesaikan ralat CORS dalam aplikasi web saya?
Untuk menyelesaikan ralat CORS, konfigurasikan pelayan untuk memasukkan yang sesuai 'Access-Control-Allow-Origin' pengepala dalam respons, membenarkan asal yang meminta.
Apa yang 'Access-Control-Allow-Origin' pengepala lakukan?
The 'Access-Control-Allow-Origin' pengepala menentukan asal mana yang dibenarkan untuk mengakses sumber, membolehkan permintaan silang asal.
Apakah tujuan withCredentials dalam XMLHttpRequest?
The withCredentials sifat menunjukkan sama ada permintaan Kawalan Akses merentas tapak perlu dibuat menggunakan bukti kelayakan seperti kuki atau pengepala kebenaran.
Mengapa saya mendapat ralat CORS walaupun pelayan saya termasuk 'Access-Control-Allow-Origin' kepala?
Anda mungkin masih mendapat ralat CORS jika pengepala CORS lain yang diperlukan, seperti 'Access-Control-Allow-Methods' atau 'Access-Control-Allow-Headers', tiada atau tidak dikonfigurasikan dengan betul.
Bolehkah saya melumpuhkan CORS dalam penyemak imbas saya?
Melumpuhkan CORS dalam penyemak imbas tidak disyorkan kerana ia menjejaskan keselamatan. Sebaliknya, konfigurasikan pelayan anda untuk mengendalikan CORS dengan betul.
Apakah permintaan prapenerbangan dalam CORS?
Permintaan prapenerbangan ialah permintaan awal yang dibuat oleh penyemak imbas menggunakan kaedah OPTIONS untuk menentukan sama ada permintaan sebenar selamat untuk dihantar. Ia menyemak pengepala CORS yang diperlukan pada pelayan.

Menggulung Perbincangan

Memahami nuansa CORS dan Dasar Asal yang Sama adalah penting untuk pembangun web. Walaupun penyemak imbas menguatkuasakan langkah keselamatan yang ketat untuk melindungi pengguna, alat seperti Posman memintas sekatan ini, menjadikannya lebih mudah untuk menguji API. Dengan mengkonfigurasi bahagian belakang dengan betul dengan pengepala CORS yang diperlukan, pembangun boleh memastikan komunikasi yang lancar dan selamat antara bahagian hadapan dan bahagian belakang. Menangani isu CORS adalah penting untuk mencipta aplikasi web yang berfungsi dan mesra pengguna.