From 1c3c4f37e03c55672d5cc4e6ef3dc1dada4cc036 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 15 Mar 2025 15:41:32 +0000 Subject: [PATCH] Update CORS proxy configuration --- src/components/supabase/ProxyTypeSelector.tsx | 6 ++-- src/contexts/auth/signIn.ts | 34 ++++++++++++++++--- src/contexts/auth/signInUtils.ts | 24 +++++++++++-- src/lib/supabase/config.ts | 6 ++-- src/utils/auth/networkUtils.ts | 19 +++++++++++ 5 files changed, 76 insertions(+), 13 deletions(-) diff --git a/src/components/supabase/ProxyTypeSelector.tsx b/src/components/supabase/ProxyTypeSelector.tsx index 2dd6c48..99798f2 100644 --- a/src/components/supabase/ProxyTypeSelector.tsx +++ b/src/components/supabase/ProxyTypeSelector.tsx @@ -20,15 +20,15 @@ const ProxyTypeSelector: React.FC = ({ - corsproxy.io (기본) + Cloudflare Workers 프록시 (기본) + corsproxy.io thingproxy.freeboard.io allorigins.win cors-anywhere.herokuapp.com - Cloudflare Workers 프록시

- 특정 프록시 서비스가 작동하지 않으면 다른 서비스를 시도해보세요. + Cloudflare 프록시가 가장 안정적인 성능을 제공합니다.

); diff --git a/src/contexts/auth/signIn.ts b/src/contexts/auth/signIn.ts index bcc54a3..fef1fad 100644 --- a/src/contexts/auth/signIn.ts +++ b/src/contexts/auth/signIn.ts @@ -1,4 +1,3 @@ - import { supabase } from '@/lib/supabase'; import { handleNetworkError, @@ -7,6 +6,7 @@ import { verifyServerConnection } from '@/utils/auth'; import { signInWithDirectApi } from './signInUtils'; +import { getProxyType, isCorsProxyEnabled } from '@/lib/supabase/config'; export const signIn = async (email: string, password: string) => { try { @@ -14,9 +14,21 @@ export const signIn = async (email: string, password: string) => { const connectionStatus = await verifyServerConnection(); if (!connectionStatus.connected) { console.log('서버 연결 실패:', connectionStatus.message); - showAuthToast('서버 연결 실패', connectionStatus.message, 'destructive'); + + // 프록시 설정 확인 및 추천 + const usingProxy = isCorsProxyEnabled(); + const proxyType = getProxyType(); + let errorMessage = connectionStatus.message; + + if (!usingProxy) { + errorMessage = `${errorMessage} (설정에서 Cloudflare CORS 프록시 활성화를 권장합니다)`; + } else if (proxyType !== 'cloudflare') { + errorMessage = `${errorMessage} (설정에서 Cloudflare CORS 프록시로 변경을 권장합니다)`; + } + + showAuthToast('서버 연결 실패', errorMessage, 'destructive'); return { - error: { message: `서버 연결에 실패했습니다: ${connectionStatus.message}` }, + error: { message: `서버 연결에 실패했습니다: ${errorMessage}` }, user: null }; } @@ -66,8 +78,22 @@ export const signIn = async (email: string, password: string) => { } catch (error: any) { console.error('로그인 중 예외 발생:', error); + // 프록시 설정 확인 및 추천 + const usingProxy = isCorsProxyEnabled(); + const proxyType = getProxyType(); + // 네트워크 오류 확인 - const errorMessage = handleNetworkError(error); + let errorMessage = handleNetworkError(error); + + // CORS 또는 네트워크 오류인 경우 Cloudflare 프록시 추천 + if (errorMessage.includes('CORS') || errorMessage.includes('네트워크') || errorMessage.includes('연결')) { + if (!usingProxy) { + errorMessage = `${errorMessage} (설정에서 Cloudflare CORS 프록시 활성화를 권장합니다)`; + } else if (proxyType !== 'cloudflare') { + errorMessage = `${errorMessage} (설정에서 Cloudflare CORS 프록시로 변경을 권장합니다)`; + } + } + showAuthToast('로그인 오류', errorMessage, 'destructive'); return { error: { message: errorMessage }, user: null }; diff --git a/src/contexts/auth/signInUtils.ts b/src/contexts/auth/signInUtils.ts index e8f7b1b..6965f95 100644 --- a/src/contexts/auth/signInUtils.ts +++ b/src/contexts/auth/signInUtils.ts @@ -1,6 +1,7 @@ import { supabase } from '@/lib/supabase'; import { parseResponse, showAuthToast, handleNetworkError } from '@/utils/auth'; +import { getProxyType, isCorsProxyEnabled } from '@/lib/supabase/config'; /** * 직접 API 호출을 통한 로그인 시도 (대체 방법) @@ -13,6 +14,11 @@ export const signInWithDirectApi = async (email: string, password: string) => { const supabaseUrl = localStorage.getItem('supabase_url') || 'https://a11.ism.kr'; const supabaseKey = localStorage.getItem('supabase_key') || supabase.supabaseKey; + // 프록시 정보 로그 + const usingProxy = isCorsProxyEnabled(); + const proxyType = getProxyType(); + console.log(`CORS 프록시 사용: ${usingProxy ? '예' : '아니오'}, 타입: ${proxyType}`); + // URL에 auth/v1이 이미 포함되어있는지 확인 const baseUrl = supabaseUrl.includes('/auth/v1') ? supabaseUrl : `${supabaseUrl}/auth/v1`; @@ -178,9 +184,21 @@ export const signInWithDirectApi = async (email: string, password: string) => { } catch (fetchError) { console.error('로그인 요청 중 fetch 오류:', fetchError); - const errorMessage = handleNetworkError(fetchError); - showAuthToast('로그인 요청 실패', errorMessage, 'destructive'); + // 오류 발생 시 프록시 설정 확인 정보 출력 + const usingProxy = isCorsProxyEnabled(); + const proxyType = getProxyType(); + console.log(`오류 발생 시 CORS 설정 - 프록시 사용: ${usingProxy ? '예' : '아니오'}, 타입: ${proxyType}`); - return { error: { message: errorMessage }, user: null }; + // Cloudflare 프록시 추천 메시지 추가 + const errorMessage = handleNetworkError(fetchError); + let enhancedMessage = errorMessage; + + if (!usingProxy || proxyType !== 'cloudflare') { + enhancedMessage = `${errorMessage} (설정에서 Cloudflare CORS 프록시 사용을 권장합니다)`; + } + + showAuthToast('로그인 요청 실패', enhancedMessage, 'destructive'); + + return { error: { message: enhancedMessage }, user: null }; } }; diff --git a/src/lib/supabase/config.ts b/src/lib/supabase/config.ts index 60f97d5..11945f1 100644 --- a/src/lib/supabase/config.ts +++ b/src/lib/supabase/config.ts @@ -6,7 +6,7 @@ export const getSupabaseUrl = () => { if (storedUrl) { // CORS 프록시 설정 확인 const useProxy = localStorage.getItem('use_cors_proxy') === 'true'; - const proxyType = localStorage.getItem('proxy_type') || 'corsproxy.io'; + const proxyType = localStorage.getItem('proxy_type') || 'cloudflare'; if (useProxy) { // URL에 이미 프로토콜이 포함되어 있는지 확인 @@ -41,7 +41,7 @@ export const getSupabaseUrl = () => { proxyUrl = `http://localhost:8080/proxy?url=${encodeURIComponent(urlForProxy)}`; break; default: - proxyUrl = `https://corsproxy.io/?${encodeURIComponent(urlForProxy)}`; + proxyUrl = `https://cors-proxy.azurewebsites.net/api/cors-proxy?url=${encodeURIComponent(urlForProxy)}`; } console.log('CORS 프록시 URL 생성:', proxyUrl); @@ -75,7 +75,7 @@ export const setProxyType = (proxyType: string) => { // 현재 사용 중인 프록시 유형 가져오기 export const getProxyType = () => { - return localStorage.getItem('proxy_type') || 'corsproxy.io'; + return localStorage.getItem('proxy_type') || 'cloudflare'; }; // CORS 프록시 사용 여부 확인 diff --git a/src/utils/auth/networkUtils.ts b/src/utils/auth/networkUtils.ts index 9cc50ee..f0fd3ba 100644 --- a/src/utils/auth/networkUtils.ts +++ b/src/utils/auth/networkUtils.ts @@ -1,5 +1,6 @@ import { supabase } from '@/lib/supabase'; +import { getProxyType, isCorsProxyEnabled } from '@/lib/supabase/config'; /** * CORS 문제 확인 @@ -37,6 +38,11 @@ export const verifyServerConnection = async (): Promise<{ }; } + // 프록시 설정 상태 확인 + const usingProxy = isCorsProxyEnabled(); + const proxyType = getProxyType(); + console.log(`연결 테스트 - CORS 프록시: ${usingProxy ? '사용 중' : '미사용'}, 타입: ${proxyType}`); + // 단순 헬스 체크 요청 try { const response = await fetch(`${supabaseUrl}/auth/v1/`, { @@ -92,6 +98,10 @@ export const verifyServerConnection = async (): Promise<{ } catch (error: any) { console.error('서버 연결 확인 중 오류:', error); + // 프록시 설정 확인 + const usingProxy = isCorsProxyEnabled(); + const proxyType = getProxyType(); + // 오류 유형에 따른 메시지 설정 let errorMessage = '알 수 없는 네트워크 오류'; @@ -111,6 +121,15 @@ export const verifyServerConnection = async (): Promise<{ } } + // Cloudflare 프록시 추천 메시지 추가 + if (errorMessage.includes('CORS') || errorMessage.includes('fetch') || errorMessage.includes('네트워크')) { + if (!usingProxy) { + console.log('CORS 오류 감지, Cloudflare 프록시 사용 권장'); + } else if (proxyType !== 'cloudflare') { + console.log('CORS 오류 감지, Cloudflare 프록시로 변경 권장'); + } + } + return { connected: false, message: errorMessage