Deskripsi

Website ini dibuat dengan menggunakan React.JS dengan bantuan Next.JS sebagai framework, styling menggunakan TailwindCSS dan bantuan clsx untuk styling secara kondisional, serta Axios untuk mengkonsumsi API.

Tugas

• Built using React.js and Typescript

• Responsive

• Pagination

• Local Bookmark

• Search Book

• Available in github.com

Penggunaan

Konfigurasi .env

DOMAIN_HOST="https://domain.anda"

Lalu jalankan perintah:

yarn install && yarn dev

atau

npm install && npm run dev

Masalah

Terdapat masalah saat mengkonsumsi API, yaitu terjadi CORS (Cross-Origin Resource Sharing) error karena tidak mengkonsumsi API dari server yang sama (lintas server / domain). Hal ini terjadi karena konfigurasi dari Backend yang kurang.

Penyelesaian Masalah

Masalah dapat diselesaikan dengan beberapa cara seperti misalnya konfigurasi CORS pada Backend, namun dalam hal ini saya menggunakan pengaturan proxy karena tidak memiliki akses di Backend.

Karena saya menggunakan NextJS maka penyelesaiannya adalah membuat konfigurasi rewrites di file next.config.js dengan destinasi ke url API yang bermasalah tadi.

Saran

Dari masalah CORS tersebut maka disarankan kepada pihak Backend untuk mengkonfigurasi CORS terlebih dahulu agar dapat dikonsumsi oleh tim Frontend dan agar tidak terjadi masalah serupa dikemudian hari.

Referensi

• CORS errors
• Rewrites - NextJS.