fix: [document] PDF 생성 시 cross-origin 이미지 누락 수정
- /api/image-proxy 프록시 라우트 추가 (CORS 우회) - convertImagesToBase64에서 cross-origin 이미지를 프록시로 fetch
This commit is contained in:
46
src/app/api/image-proxy/route.ts
Normal file
46
src/app/api/image-proxy/route.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
/**
|
||||
* 이미지 프록시 API
|
||||
* GET /api/image-proxy?url=<encoded_url>
|
||||
*
|
||||
* CORS 우회를 위한 서버 사이드 이미지 프록시.
|
||||
* PDF 생성 시 클라이언트에서 cross-origin 이미지를 base64로 변환할 때 사용.
|
||||
*/
|
||||
export async function GET(request: NextRequest) {
|
||||
const url = request.nextUrl.searchParams.get('url');
|
||||
|
||||
if (!url) {
|
||||
return NextResponse.json({ error: 'url parameter is required' }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
headers: { 'Accept': 'image/*' },
|
||||
signal: AbortSignal.timeout(10000),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: `Failed to fetch image: ${response.status}` },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const contentType = response.headers.get('content-type') || 'image/jpeg';
|
||||
const buffer = await response.arrayBuffer();
|
||||
|
||||
return new NextResponse(buffer, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': contentType,
|
||||
'Cache-Control': 'public, max-age=3600',
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to proxy image' },
|
||||
{ status: 502 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -173,8 +173,13 @@ export function DocumentViewer({
|
||||
const src = img.src;
|
||||
if (!src || src.startsWith('data:')) return;
|
||||
|
||||
// cross-origin 이미지는 서버 프록시를 통해 fetch (CORS 우회)
|
||||
const isSameOrigin = src.startsWith(window.location.origin) || src.startsWith('/');
|
||||
const fetchUrl = isSameOrigin ? src : `/api/image-proxy?url=${encodeURIComponent(src)}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(src);
|
||||
const response = await fetch(fetchUrl);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const blob = await response.blob();
|
||||
const dataUrl = await new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
|
||||
Reference in New Issue
Block a user