Fix: CORS and API base URL for music create in staging

- Update CORS config to allow all origins (wildcard first) for better staging support
- Change API fetch base URL from absolute to relative (/) to prevent mixed content blocking
- Add detailed logging in music create page for better debugging
- Update .env.example with better NEXT_PUBLIC_BASE_URL documentation
- Add MUSIK_CREATE_ANALYSIS.md with comprehensive error analysis

Fixes ERR_BLOCKED_BY_CLIENT error when creating music in staging environment

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/app/admin/(dashboard)/musik/create/page.tsx

@@ -123,37 +123,51 @@ export default function CreateMusik() {
       setIsSubmitting(true);
 
       // Upload cover image
+      console.log('Uploading cover image:', coverFile.name);
       const coverRes = await ApiFetch.api.fileStorage.create.post({
         file: coverFile,
         name: coverFile.name,
       });
 
+      console.log('Cover upload response:', coverRes);
       const coverUploaded = coverRes.data?.data;
       if (!coverUploaded?.id) {
-        return toast.error('Gagal mengunggah cover, silakan coba lagi');
+        console.error('Cover upload failed:', coverRes);
+        toast.error('Gagal mengunggah cover, silakan coba lagi');
+        return;
       }
 
       musikState.musik.create.form.coverImageId = coverUploaded.id;
 
       // Upload audio file
+      console.log('Uploading audio file:', audioFile.name);
       const audioRes = await ApiFetch.api.fileStorage.create.post({
         file: audioFile,
         name: audioFile.name,
       });
 
+      console.log('Audio upload response:', audioRes);
       const audioUploaded = audioRes.data?.data;
       if (!audioUploaded?.id) {
-        return toast.error('Gagal mengunggah audio, silakan coba lagi');
+        console.error('Audio upload failed:', audioRes);
+        toast.error('Gagal mengunggah audio, silakan coba lagi');
+        return;
       }
 
       musikState.musik.create.form.audioFileId = audioUploaded.id;
 
+      // Create musik entry
+      console.log('Creating musik entry with form:', musikState.musik.create.form);
       await musikState.musik.create.create();
 
       resetForm();
       router.push('/admin/musik');
     } catch (error) {
-      console.error('Error creating musik:', error);
+      console.error('Error creating musik:', {
+        error,
+        message: error instanceof Error ? error.message : 'Unknown error',
+        stack: error instanceof Error ? error.stack : undefined,
+      });
       toast.error('Terjadi kesalahan saat membuat musik');
     } finally {
       setIsSubmitting(false);

src/app/api/[[...slugs]]/route.ts

@@ -47,15 +47,15 @@ fs.mkdir(UPLOAD_DIR_IMAGE, {
 
 const corsConfig = {
   origin: [
+    "*", // Allow all origins - must be first when using credentials: true
     "http://localhost:3000",
     "http://localhost:3001",
     "https://cld-dkr-desa-darmasaba-stg.wibudev.com",
     "https://cld-dkr-staging-desa-darmasaba.wibudev.com",
-    "*", // Allow all origins in development
   ],
   methods: ["GET", "POST", "PATCH", "DELETE", "PUT", "OPTIONS"] as HTTPMethod[],
-  allowedHeaders: ["Content-Type", "Authorization", "*"],
-  exposedHeaders: "*",
+  allowedHeaders: ["Content-Type", "Authorization", "Accept", "*"],
+  exposedHeaders: ["Content-Range", "X-Content-Range", "*"],
   maxAge: 86400, // 24 hours
   credentials: true,
 };

src/lib/api-fetch.ts

@@ -1,8 +1,9 @@
 import { AppServer } from '@/app/api/[[...slugs]]/route'
 import { treaty } from '@elysiajs/eden'
 
-// const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'localhost:3000'
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
+// Use relative URL '/' for better deployment flexibility
+// This allows the API to work correctly in both development and staging/production
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || '/'
 
 const ApiFetch = treaty<AppServer>(BASE_URL)