Investigate CORS proxy failure

The CORS proxy is failing despite being enabled, resulting in REST API and database connection errors. Investigate the cause of the failure.

src/lib/supabase/client.ts

@@ -24,16 +24,25 @@ try {
       flowType: 'implicit',
     },
     global: {
-      fetch: (url, options) => {
+      // 커스텀 fetch 구현
-        // CORS 디버깅을 위한 사용자 정의 fetch
+      fetch: (...args) => {
+        // 첫 번째 인자는 URL 또는 Request 객체
+        const urlOrRequest = args[0];
+        
+        // URL 로깅 및 디버깅
+        let url = typeof urlOrRequest === 'string' ? urlOrRequest : urlOrRequest.url;
         console.log('Supabase fetch 요청:', url);
-        return fetch(url, options).then(response => {
+        
-          console.log('Supabase 응답 상태:', response.status);
+        // 기본 fetch 호출
-          return response;
+        return fetch(...args)
-        }).catch(err => {
+          .then(response => {
-          console.error('Supabase fetch 오류:', err);
+            console.log('Supabase 응답 상태:', response.status);
-          throw err;
+            return response;
-        });
+          })
+          .catch(err => {
+            console.error('Supabase fetch 오류:', err);
+            throw err;
+          });
       }
     }
   });

src/lib/supabase/config.ts

@@ -6,9 +6,10 @@ export const getSupabaseUrl = () => {
   if (storedUrl) {
     // CORS 프록시 설정 확인
     const useProxy = localStorage.getItem('use_cors_proxy') === 'true';
-    if (useProxy && storedUrl.startsWith('http://')) {
+    if (useProxy) {
-      // CORS 프록시 URL로 변환
+      // CORS 프록시 URL로 변환 (URL 구조 개선)
-      return `https://corsproxy.io/?${encodeURIComponent(storedUrl)}`;
+      const cleanUrl = storedUrl.trim();
+      return `https://corsproxy.io/?${encodeURIComponent(cleanUrl)}`;
     }
     return storedUrl;
   }
@@ -39,8 +40,11 @@ export const isCorsProxyEnabled = () => {
 
 // 온프레미스 연결을 위한 설정 도우미 함수
 export const configureSupabase = (url: string, key: string, useProxy: boolean = false) => {
+  // URL 정리 (앞뒤 공백 제거)
+  const cleanUrl = url.trim();
+  
   // 로컬 스토리지에 설정 저장
-  localStorage.setItem('supabase_url', url);
+  localStorage.setItem('supabase_url', cleanUrl);
   localStorage.setItem('supabase_key', key);
   localStorage.setItem('use_cors_proxy', useProxy.toString());
   

src/lib/supabase/tests.ts

@@ -42,7 +42,11 @@ export const testSupabaseConnection = async () => {
     // 1. REST API 접근 테스트
     try {
       console.log('REST API 테스트 시작...');
-      const apiUrl = `${results.proxyUrl}/rest/v1/`;
+      // 정확한 REST API 엔드포인트 구성
+      const apiUrl = results.proxyUrl.endsWith('/') 
+        ? `${results.proxyUrl}rest/v1/`
+        : `${results.proxyUrl}/rest/v1/`;
+      
       console.log('REST API 테스트 URL:', apiUrl);
       
       const response = await fetch(apiUrl, {

src/pages/SupabaseSettings.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { DatabaseIcon, Save, RefreshCw, Shield } from "lucide-react";
+import { DatabaseIcon, Save, RefreshCw, Shield, AlertTriangle, Check } from "lucide-react";
 import { toast } from "@/hooks/useToast.wrapper";
 import { configureSupabase, isCorsProxyEnabled } from "@/lib/supabase/config";
 import { Switch } from "@/components/ui/switch";
@@ -29,6 +29,11 @@ const SupabaseSettings = () => {
     setUseProxy(proxyEnabled);
   }, []);
   
+  const validateUrl = (url: string): boolean => {
+    // URL 유효성 검사: http:// 또는 https://로 시작하는지 확인
+    return /^https?:\/\/.+/.test(url);
+  };
+  
   const handleSave = () => {
     if (!supabaseUrl || !supabaseKey) {
       toast({
@@ -39,6 +44,15 @@ const SupabaseSettings = () => {
       return;
     }
     
+    if (!validateUrl(supabaseUrl)) {
+      toast({
+        title: "URL 오류",
+        description: "유효한 URL 형식이 아닙니다. http:// 또는 https://로 시작하는 URL을 입력해주세요.",
+        variant: "destructive"
+      });
+      return;
+    }
+    
     setIsSaving(true);
     
     try {
@@ -90,6 +104,9 @@ const SupabaseSettings = () => {
     }
   };
   
+  const isHttpsUrl = supabaseUrl.startsWith("https://");
+  const suggestProxy = supabaseUrl.startsWith("http://") && !useProxy;
+  
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -114,6 +131,21 @@ const SupabaseSettings = () => {
                   className="pl-10 neuro-pressed"
                 />
               </div>
+              
+              {/* URL 관련 경고 및 안내 추가 */}
+              {suggestProxy && (
+                <div className="flex items-center text-amber-500 text-xs mt-1 p-2 bg-amber-50 rounded-md">
+                  <AlertTriangle className="h-4 w-4 mr-1 flex-shrink-0" />
+                  <span>HTTP URL을 사용하고 계십니다. CORS 프록시 활성화를 권장합니다.</span>
+                </div>
+              )}
+              
+              {isHttpsUrl && (
+                <div className="flex items-center text-green-500 text-xs mt-1 p-2 bg-green-50 rounded-md">
+                  <Check className="h-4 w-4 mr-1 flex-shrink-0" />
+                  <span>HTTPS URL을 사용하고 있습니다. 권장됩니다.</span>
+                </div>
+              )}
             </div>
             
             <div className="space-y-2">
@@ -248,7 +280,7 @@ const SupabaseSettings = () => {
           <ul className="list-disc pl-5 text-sm text-gray-500 space-y-2">
             <li>
               <strong>Supabase URL</strong>: 온프레미스로 설치한 Supabase 인스턴스의 URL을 입력합니다.
-              (예: http://192.168.1.100:8000)
+              (예: https://192.168.1.100:8000)
             </li>
             <li>
               <strong>Anon Key</strong>: Supabase 대시보드의 API 설정에서 찾을 수 있는 anon/public 키를 입력합니다.
@@ -256,6 +288,9 @@ const SupabaseSettings = () => {
             <li>
               <strong>CORS 프록시</strong>: HTTP URL에 대한 브라우저 보안 제한을 우회하기 위해 사용합니다. HTTPS가 아닌 URL에 접근 문제가 있는 경우 활성화하세요.
             </li>
+            <li className="text-amber-500 font-medium">
+              가능하면 HTTPS URL을 사용하는 것이 좋습니다. HTTP URL을 사용해야 하는 경우 CORS 프록시를 활성화하세요.
+            </li>
           </ul>
         </div>
       </div>