fix: 첨부 다운로드 링크를 백엔드 절대 URL 로 변환

백엔드가 내려준 루트 상대경로(/api/.../download)를 <a href> 가 프론트 오리진으로
해석해 404 페이지가 뜨던 문제 수정. useApi 에 toAbsoluteApiUrl 추가, 첨부 매핑에 적용.
(dev 프론트 5273 / 백엔드 3100 오리진 분리 환경)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-20 17:18:14 +09:00
parent 406e13da1c
commit df97719e0f
2 changed files with 16 additions and 1 deletions
+13
View File
@@ -58,6 +58,19 @@ const api: AxiosInstance = axios.create({
withCredentials: true,
})
// 백엔드 오리진 — <a href> 다운로드 링크용. axios 와 달리 앵커는 baseURL 을 쓰지 않으므로,
// 백엔드가 내려준 루트 상대 경로('/api/...')에 백엔드 오리진을 붙여 절대 URL 로 만든다.
// (dev 는 프론트 5273 / 백엔드 3100 로 오리진이 달라, 안 붙이면 프론트로 가서 404 페이지가 뜬다)
const API_ORIGIN = new URL(
import.meta.env.VITE_API_BASE_URL || '/api',
window.location.origin,
).origin
export function toAbsoluteApiUrl(path: string): string {
if (!path || /^https?:\/\//i.test(path)) return path
return `${API_ORIGIN}${path.startsWith('/') ? '' : '/'}${path}`
}
// 요청 인터셉터 — CSRF, 추가 헤더 등 필요 시 확장
api.interceptors.request.use(
(config: InternalAxiosRequestConfig) => config,
+3 -1
View File
@@ -1,6 +1,7 @@
import { computed, ref } from 'vue'
import { defineStore } from 'pinia'
import { useTask } from '@/composables/useTask'
import { toAbsoluteApiUrl } from '@/composables/useApi'
import { DEFAULT_PAGE_SIZE } from '@/types/pagination'
import {
escapeHtml,
@@ -75,7 +76,8 @@ function toAttachmentView(a: ApiAttachment): AttachmentView {
name: a.name,
size: formatBytes(a.size),
kind: a.kind,
url: a.url,
// 다운로드 앵커용 절대 URL(백엔드 오리진) — 상대경로면 프론트로 가서 404 페이지가 됨
url: toAbsoluteApiUrl(a.url),
}
}