Memahami Kesalahan CORS di jQuery tetapi Tidak di Tukang Pos

Memahami Kesalahan CORS di jQuery tetapi Tidak di Tukang Pos
Arthur Petit
Kamis, 04 Juli 2024 09.45.59
JavaScript

Mengapa Terjadi Kesalahan CORS di Browser?

Saat bekerja dengan JavaScript untuk menyambung ke RESTful API, Anda mungkin mengalami kesalahan "Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta". Kesalahan ini biasanya terjadi karena Kebijakan Asal yang Sama pada browser, yang membatasi halaman web untuk membuat permintaan ke domain yang berbeda dari domain yang melayani halaman web tersebut.

Menariknya, ketika permintaan yang sama dibuat melalui alat seperti Postman, tidak terjadi kesalahan seperti itu. Perbedaan ini dapat membingungkan pengembang. Memahami mengapa panggilan XMLHttpRequest atau pengambilan diblokir oleh CORS di browser, tetapi tidak di Postman, sangat penting untuk memecahkan masalah dan mengembangkan aplikasi web yang aman.

Memecahkan Masalah CORS di JavaScript dengan Flask Backend

Kode Frontend 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);
    });
  });
});

Menyiapkan CORS di Flask

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

Memecahkan Masalah CORS di JavaScript dengan Flask Backend

Kode Frontend 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);
    });
  });
});

Menyiapkan CORS di Flask

Kode 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 Masalah CORS Terjadi di Browser dan Bukan di Tukang Pos

Salah satu aspek penting yang perlu dipahami tentang Cross-Origin Resource Sharing (CORS) adalah mekanisme keamanan yang diterapkan browser untuk melindungi pengguna. Browser menerapkan Kebijakan Asal yang Sama, yang mencegah halaman web membuat permintaan ke domain yang berbeda dari domain yang melayani halaman web tersebut. Ini adalah langkah keamanan untuk mencegah situs web jahat mengakses informasi sensitif di situs web lain melalui JavaScript. Saat Anda membuat XMLHttpRequest atau mengambil permintaan dari browser, ia akan memeriksa 'Access-Control-Allow-Origin' header dalam respons dari server. Jika header ini tidak ada atau tidak mengizinkan asal permintaan, browser akan memblokir permintaan tersebut, yang mengakibatkan kesalahan CORS.

Sebaliknya, tukang pos bukanlah browser melainkan alat untuk menguji API. Itu tidak menerapkan Kebijakan Asal yang Sama karena tidak berjalan dalam lingkungan browser. Oleh karena itu, ia tidak melakukan pemeriksaan keamanan yang sama dan mengizinkan permintaan dibuat ke domain mana pun tanpa batasan. Inilah mengapa Anda tidak mengalami masalah CORS saat menggunakan Tukang Pos untuk membuat permintaan yang sama. Memahami perbedaan ini sangat penting bagi pengembang untuk memecahkan masalah dan menyelesaikan masalah terkait CORS secara efektif. Dengan mengonfigurasi server agar menyertakan header CORS yang sesuai, Anda dapat memastikan bahwa aplikasi web Anda dapat berkomunikasi dengan API eksternal dengan aman dan tanpa kesalahan.

Pertanyaan dan Jawaban Umum Tentang CORS dan JavaScript

  1. Apa itu CORS?
  2. CORS adalah singkatan dari Cross-Origin Resource Sharing, sebuah mekanisme yang memungkinkan sumber daya terbatas pada halaman web diminta dari domain lain di luar domain asal sumber daya tersebut.
  3. Mengapa browser menerapkan Kebijakan Asal yang Sama?
  4. Kebijakan Asal yang Sama diterapkan untuk melindungi data pengguna dan mencegah situs web jahat mengakses informasi sensitif dari domain lain melalui JavaScript.
  5. Mengapa Tukang Pos tidak menerapkan CORS?
  6. Tukang pos tidak menerapkan CORS karena ini bukan browser dan tidak berjalan di lingkungan browser, sehingga tidak perlu mematuhi Same-Origin Policy.
  7. Bagaimana cara mengatasi kesalahan CORS di aplikasi web saya?
  8. Untuk mengatasi kesalahan CORS, konfigurasikan server untuk menyertakan yang sesuai 'Access-Control-Allow-Origin' header dalam respons, memungkinkan asal permintaan.
  9. Apa artinya 'Access-Control-Allow-Origin' tajuk lakukan?
  10. Itu 'Access-Control-Allow-Origin' header menentukan asal mana yang diizinkan untuk mengakses sumber daya, sehingga memungkinkan permintaan lintas asal.
  11. Apa tujuannya withCredentials di XMLHttpRequest?
  12. Itu withCredentials properti menunjukkan apakah permintaan Kontrol Akses lintas situs harus dibuat menggunakan kredensial seperti cookie atau header otorisasi.
  13. Mengapa saya mendapatkan kesalahan CORS meskipun server saya menyertakannya 'Access-Control-Allow-Origin' tajuk?
  14. Anda mungkin masih mendapatkan kesalahan CORS jika header CORS lainnya diperlukan, seperti 'Access-Control-Allow-Methods' atau 'Access-Control-Allow-Headers', hilang atau salah dikonfigurasi.
  15. Bisakah saya menonaktifkan CORS di browser saya?
  16. Menonaktifkan CORS di browser tidak disarankan karena membahayakan keamanan. Sebaliknya, konfigurasikan server Anda untuk menangani CORS dengan benar.
  17. Apa yang dimaksud dengan permintaan pra-penerbangan di CORS?
  18. Permintaan preflight adalah permintaan awal yang dibuat oleh browser menggunakan metode OPTIONS untuk menentukan apakah permintaan sebenarnya aman untuk dikirim. Ia memeriksa header CORS yang diperlukan di server.

Mengakhiri Diskusi

Memahami nuansa CORS dan Kebijakan Asal yang Sama sangat penting bagi pengembang web. Meskipun browser menerapkan langkah-langkah keamanan yang ketat untuk melindungi pengguna, alat seperti Postman mengabaikan batasan ini, sehingga lebih mudah untuk menguji API. Dengan mengonfigurasi backend dengan benar menggunakan header CORS yang diperlukan, pengembang dapat memastikan komunikasi yang lancar dan aman antara frontend dan backend. Mengatasi masalah CORS sangat penting untuk menciptakan aplikasi web yang fungsional dan ramah pengguna.