Programming

Cara mengatasi CORS ketika menggunakan FastAPI

oleh Ekky Armandi • 30 Mei 2024

![[images/introduction-to-fastapi/Pasted image 20240816183405.png|Thumbnail of The different between Django, Flask, and FastAPI]]

Pendahuluan

Pernahkah kamu mengalami CORS error ketika mencoba menghubungkan aplikasi frontend kamu dengan suatu API? Sebenarnya ini adalah mekanisme kemanan yang dimiliki oleh API supaya aplikasi kita tidak mudah diakses oleh sembarang domain dengan kata lain hanya domain yang diperboolehkan saja yang bisa melakukan koneksi ke API kita.

Dalam tulisan ini kita akan membahas tentang:

  • Apa itu CORS error?
  • Bagaimana cara mereproduksi CORS error?
  • Bagaimana cara mengatasinya?

Apa itu CORS error?

CORS (Cross-Origin Resource Sharing) origin error adalah pesan kesalahan yang muncul ketika suatu web browser mencoba untuk mengakses sumber daya dari server yang berbeda dari situs web asal, dan server tersebut tidak memberikan izin untuk hal tersebut. Ini merupakan mekanisme keamanan yang dirancang untuk melindungi pengguna dari konten berbahaya.

Misalnya, jika kamu mencoba mengambil data dari API yang memiliki kebijakan CORS yang ketat, dan API tersebut tidak mengizinkan permintaan dari domain situs web kamu, kamu akan menerima CORS error.

Untuk memperbaiki error ini, kamu perlu memastikan bahwa server target mempunyai header CORS yang tepat dan mengizinkan permintaan dari domain situs web kamu. Atau, kamu bisa menggunakan proxy server untuk melakukan permintaan pada behalf situs web kamu.

Bagaimana cara mereproduksi CORS error?

Pada tulisan ini saya akan menggunakan contoh aplikasi Python sebagai backend menggunakan FastAPI dan React.js sebagai aplikasi frontend untuk mereproduksi masalah CORS error.

Reproduksi error merupakan proses untuk menunjukkan atau memperlihatkan kembali bug atau masalah dalam perangkat lunak yang telah dilaporkan. Proses ini penting dalam pengujian perangkat lunak dan pemecahan masalah, karena membantu para developer untuk melihat apa yang sebenarnya terjadi dan bagaimana cara mengatasinya. Selain itu, reproduksi error juga digunakan sebagai bukti bahwa ada sesuatu yang tidak beres dengan sistem atau aplikasi.

Jika error tidak dapat direproduksi, maka akan sulit untuk menentukan apa penyebabnya dan bagaimana memperbaikinya. Oleh karena itu, langkah-langkah untuk mereproduksi error biasanya dicatat dan disertakan dalam laporan bug. Hal ini juga membantu pengembang lain dalam tim untuk memahami masalah tersebut jika mereka perlu bekerja pada perbaikan tersebut.

Namun, ada beberapa tantangan dalam reproduksi error. Misalnya, mungkin saja error hanya terjadi di bawah kondisi tertentu yang sulit untuk ditiru. Atau mungkin saja error tersebut intermiten atau acak, yang berarti tidak selalu terjadi setiap kali aksi tertentu dilakukan.

Meskipun ada saja kemungkinan reproduksi error tidak dapat dilakukan, tetap saja, reproduksi error adalah langkah penting dalam siklus hidup pengembangan perangkat lunak dan tidak boleh diabaikan.

Untuk me-reproduce CORS error pada aplikasi yang menggunakan Python FastAPI dan React.js, Kamu bisa mengikuti langkah-langkah berikut:

  1. Buat sebuah aplikasi FastAPI dan jalankan server pada localhost dengan port yang berbeda dari aplikasi React.js. Misalnya, jalankan FastAPI di http://localhost:8000 dan React.js di http://localhost:3000.

  2. Dalam aplikasi FastAPI kamu, jangan tambahkan middleware untuk menghandle CORS.

  3. Dalam aplikasi React.js, buat request ke endpoint FastAPI menggunakan fetch atau library HTTP lainnya seperti axios. Misalnya:

fetch('http://localhost:8000/api/data')
  .then(response => response.json())
  .then(data => console.log(data));
  1. Jalankan aplikasi React.js dan lihat log di console browser.

Kamu seharusnya melihat pesan error seperti ini:

Access to fetch at 'http://localhost:8000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Pesan error ini menunjukkan bahwa browser telah memblokir request karena server (FastAPI) tidak mengirim header Access-Control-Allow-Origin dalam responsenya, yang diperlukan untuk komunikasi antar-origin sesuai kebijakan CORS.

Note: Untuk menghindari error tersebut pada produksi, kamu bisa menambahkan middleware CORS di FastAPI menggunakan library fastapi.middleware.cors.CORSMiddleware. Pastikan kamu menentukan origin yang tepat dalam pengaturan middleware tersebut.

Bagaimana cara mengatasi CORS error?

FastAPI memiliki cara untuk menangani CORS melalui middleware yang disediakan oleh Starlette, yaitu CORSMiddleware.

Berikut adalah cara mengatasi CORS error pada FastAPI:

  1. Pertama-tama, import CORSMiddleware dari fastapi:
from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware
  1. Buat instance dari FastAPI dan tambahkan CORSMiddleware ke dalam aplikasi tersebut:
app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Mengizinkan semua origin
    allow_credentials=True,
    allow_methods=["*"],  # Mengizinkan semua metode HTTP
    allow_headers=["*"],  # Mengizinkan semua header HTTP
)

Dalam kode di atas, kita mengizinkan semua origin, metode HTTP, dan header HTTP. Kamu bisa mengubahnya sesuai dengan kebutuhan kamu.

Perhatikan bahwa pengaturan ini bisa menjadi isu keamanan jika kamu mengizinkan semua origin dalam aplikasi produksi. Kamu harus hanya mengizinkan origin yang diperlukan saja dalam pengaturannya.

  1. Setelah itu, jalankan aplikasi FastAPI kamu seperti biasanya. CORS error seharusnya sudah tidak muncul lagi.

Semoga ilmunya bermanfaat!

Follow me on