From 778c76f09055d0ed8fee3d9d175b563067da0fbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Sat, 21 Mar 2026 10:45:55 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20[changes]=20=EC=A0=88=EA=B3=A1=ED=92=88?= =?UTF-8?q?=20Canvas=20CORS=20=ED=94=84=EB=A1=9D=EC=8B=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=9D=B4=EB=A0=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20260321_bending_api_internal_url_fix.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) 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 코드 스타일 검사 통과 ## 관련 문서