diff --git a/changes/20260321_bending_api_internal_url_fix.md b/changes/20260321_bending_api_internal_url_fix.md index d6a3d8a..8b72805 100644 --- a/changes/20260321_bending_api_internal_url_fix.md +++ b/changes/20260321_bending_api_internal_url_fix.md @@ -91,6 +91,45 @@ API 호출 실패 시 빈 데이터를 반환하여 "데이터가 없습니다" --- +## 수정 4: Canvas 편집기 R2 이미지 CORS 에러 (MNG) + +### 원인 + +절곡품 전개도 편집기(Canvas Editor)에서 이미지를 로드할 때: +1. `fabric.Image.fromURL`에 `crossOrigin: 'anonymous'` 설정 +2. `/files/{id}/view`가 R2 presigned URL로 redirect +3. R2 버킷에 CORS 허용 설정이 없어 브라우저가 차단 +4. Canvas가 "tainted" 상태가 되어 `toDataURL()` 실패 + +### 수정 파일 (MNG) + +| 파일 | 변경 내용 | +|------|----------| +| `app/Http/Controllers/FileViewController.php` | `proxy()` 메서드 추가 — R2 이미지를 서버에서 다운로드 후 같은 도메인으로 스트리밍 | +| `routes/web.php` | `/files/{id}/proxy` 라우트 추가 | +| `public/js/canvas-editor.js` | `fabric.Image.fromURL`에 `crossOrigin: 'anonymous'` 옵션 추가 | +| `resources/views/bending/base/form.blade.php` | `` 태그에 `data-proxy-url` 속성 추가, Canvas 편집기에서 프록시 URL 사용 | +| `resources/views/bending/products/form.blade.php` | 동일 패턴 적용 | + +### 동작 원리 + +- 일반 `` 표시: `/files/{id}/view` → R2 redirect (CORS 불필요, 빠름) +- Canvas 편집기: `/files/{id}/proxy` → MNG 서버가 R2에서 다운로드 후 스트리밍 (같은 도메인, CORS 무관) + +### 로컬 `.env` 변경 + +API `.env`에 Cloudflare R2 접속 정보 추가 (개발서버와 동일): + +``` +R2_ACCESS_KEY_ID=cecd4d4c... +R2_SECRET_ACCESS_KEY=f20136ec... +R2_BUCKET=sam +R2_ENDPOINT=https://caf8dcb2c4ea443018ee5e7a7421db0e.r2.cloudflarestorage.com +R2_REGION=auto +``` + +--- + ## 신규 API 호출 코드 작성 시 필수 규칙 MNG에서 API를 호출하는 코드를 새로 작성할 때: @@ -101,6 +140,7 @@ MNG에서 API를 호출하는 코드를 새로 작성할 때: 필수 MNG에서 Bearer 없이 호출하려면 API 화이트리스트에 라우트 추가 권장 FormulaApiService::resolveApiConnection() 참조 권장 API 실패 시 사용자에게 구체적인 안내 메시지 표시 +권장 Canvas에서 외부 이미지 사용 시 프록시(/files/{id}/proxy) 경유 ``` ## 테스트 체크리스트 @@ -108,6 +148,7 @@ MNG에서 API를 호출하는 코드를 새로 작성할 때: - [x] 로컬 Docker에서 `/bending/base` 페이지 정상 로드 (266건) - [x] 로컬 Docker에서 `/bending/products` 페이지 정상 로드 - [x] API 미인증 시 안내 메시지 표시 확인 +- [x] Canvas 편집기 이미지 로드 및 toDataURL 정상 동작 - [x] pint 코드 스타일 검사 통과 ## 관련 문서