Hiểu lỗi CORS trong jQuery nhưng không có trong Postman

Arthur Petit

10:17:22 Thứ Năm, 4 tháng 7, 2024

Tại sao lỗi CORS xảy ra trong trình duyệt?

Khi làm việc với JavaScript để kết nối với API RESTful, bạn có thể gặp phải lỗi "Không có tiêu đề 'Kiểm soát truy cập-Cho phép-Xuất xứ' trên tài nguyên được yêu cầu". Lỗi này thường xảy ra do Chính sách cùng nguồn gốc của trình duyệt, hạn chế các trang web gửi yêu cầu đến một miền khác với miền phục vụ trang web.

Điều thú vị là khi yêu cầu tương tự được thực hiện thông qua các công cụ như Postman thì không có lỗi nào xảy ra. Sự khác biệt này có thể gây bối rối cho các nhà phát triển. Hiểu lý do tại sao XMLHttpRequest hoặc lệnh gọi tìm nạp bị CORS chặn trong trình duyệt, nhưng không bị chặn trong Postman, là điều quan trọng để khắc phục sự cố và phát triển các ứng dụng web an toàn.

Giải quyết các vấn đề về CORS trong JavaScript bằng Flask Backend

Mã giao diện người dùng JavaScript sử dụng 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);
    });
  });
});

Thiết lập CORS trong Flask

Mã phụ trợ Python sử dụng 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)

Giải quyết các vấn đề về CORS trong JavaScript bằng Flask Backend

Mã giao diện người dùng JavaScript sử dụng 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);
    });
  });
});

Thiết lập CORS trong Flask

Mã phụ trợ Python sử dụng 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)

Tại sao sự cố CORS xảy ra trong trình duyệt mà không xảy ra trong Postman

Một khía cạnh quan trọng cần hiểu về Chia sẻ tài nguyên giữa các nguồn gốc (CORS) là cơ chế bảo mật mà trình duyệt triển khai để bảo vệ người dùng. Các trình duyệt thực thi Chính sách cùng nguồn gốc, chính sách này ngăn các trang web gửi yêu cầu đến một miền khác với miền phục vụ trang web. Đây là biện pháp bảo mật nhằm ngăn chặn các trang web độc hại truy cập thông tin nhạy cảm trên các trang web khác thông qua JavaScript. Khi bạn thực hiện một yêu cầu XMLHttpRequest hoặc tìm nạp từ trình duyệt, nó sẽ kiểm tra 'Access-Control-Allow-Origin' tiêu đề trong phản hồi từ máy chủ. Nếu tiêu đề này không xuất hiện hoặc không cho phép nguồn gốc yêu cầu, trình duyệt sẽ chặn yêu cầu, dẫn đến lỗi CORS.

Mặt khác, Postman không phải là một trình duyệt mà là một công cụ để kiểm tra API. Nó không thực thi Chính sách cùng nguồn gốc vì nó không chạy trong môi trường trình duyệt. Do đó, nó không thực hiện các kiểm tra bảo mật tương tự và cho phép thực hiện các yêu cầu đối với bất kỳ miền nào mà không bị hạn chế. Đây là lý do tại sao bạn không gặp phải vấn đề CORS khi sử dụng Postman để thực hiện yêu cầu tương tự. Hiểu được sự khác biệt này là rất quan trọng để các nhà phát triển khắc phục và giải quyết các vấn đề liên quan đến CORS một cách hiệu quả. Bằng cách định cấu hình máy chủ để bao gồm các tiêu đề CORS thích hợp, bạn có thể đảm bảo rằng ứng dụng web của mình có thể giao tiếp với các API bên ngoài một cách an toàn và không có lỗi.

Các câu hỏi và câu trả lời thường gặp về CORS và JavaScript

CORS là gì?
CORS là viết tắt của Chia sẻ tài nguyên nguồn gốc chéo, một cơ chế cho phép các tài nguyên bị hạn chế trên một trang web được yêu cầu từ một miền khác bên ngoài miền mà tài nguyên bắt nguồn.
Tại sao các trình duyệt thực thi Chính sách cùng nguồn gốc?
Chính sách cùng nguồn gốc được thực thi để bảo vệ dữ liệu của người dùng và ngăn các trang web độc hại truy cập thông tin nhạy cảm từ các tên miền khác thông qua JavaScript.
Tại sao Postman không thực thi CORS?
Postman không thực thi CORS vì đây không phải là trình duyệt và không chạy trong môi trường trình duyệt nên không cần tuân thủ Chính sách cùng nguồn gốc.
Làm cách nào để giải quyết lỗi CORS trong ứng dụng web của tôi?
Để khắc phục lỗi CORS, hãy định cấu hình máy chủ để bao gồm phần thích hợp 'Access-Control-Allow-Origin' tiêu đề trong phản hồi, cho phép nguồn gốc yêu cầu.
cái gì làm 'Access-Control-Allow-Origin' tiêu đề làm gì?
Các 'Access-Control-Allow-Origin' tiêu đề chỉ định nguồn gốc nào được phép truy cập tài nguyên, cho phép các yêu cầu có nguồn gốc chéo.
Mục đích của việc này là gì withCredentials trong XMLHttpRequest?
Các withCredentials thuộc tính cho biết liệu có nên thực hiện các yêu cầu Kiểm soát truy cập trên nhiều trang web bằng thông tin xác thực như cookie hoặc tiêu đề ủy quyền hay không.
Tại sao tôi gặp lỗi CORS mặc dù máy chủ của tôi có chứa 'Access-Control-Allow-Origin' tiêu đề?
Bạn vẫn có thể gặp lỗi CORS nếu các tiêu đề CORS được yêu cầu khác, chẳng hạn như 'Access-Control-Allow-Methods' hoặc số 8, bị thiếu hoặc được cấu hình không chính xác.
Tôi có thể tắt CORS trong trình duyệt của mình không?
Không nên tắt CORS trong trình duyệt vì nó ảnh hưởng đến bảo mật. Thay vào đó, hãy định cấu hình máy chủ của bạn để xử lý CORS đúng cách.
Yêu cầu preflight trong CORS là gì?
Yêu cầu preflight là yêu cầu ban đầu được trình duyệt thực hiện bằng phương pháp TÙY CHỌN để xác định xem yêu cầu thực tế có an toàn để gửi hay không. Nó kiểm tra các tiêu đề CORS cần thiết trên máy chủ.

Kết thúc cuộc thảo luận

Hiểu các sắc thái của CORS và Chính sách xuất xứ giống nhau là điều cần thiết đối với các nhà phát triển web. Trong khi các trình duyệt thực thi các biện pháp bảo mật nghiêm ngặt để bảo vệ người dùng thì các công cụ như Postman lại bỏ qua những hạn chế này, giúp việc kiểm tra API trở nên dễ dàng hơn. Bằng cách định cấu hình chính xác phần phụ trợ với các tiêu đề CORS cần thiết, nhà phát triển có thể đảm bảo giao tiếp trơn tru và an toàn giữa giao diện người dùng và phần phụ trợ. Giải quyết các vấn đề CORS là rất quan trọng để tạo các ứng dụng web thân thiện với người dùng và chức năng.