Skip to content

fix(HeritageCard): switch img src to backend proxy to avoid CORS errors#378

Open
zigzagdev wants to merge 2 commits into
chore/proxy-adapt-image_urlfrom
fix/heritage-card-proxy-url
Open

fix(HeritageCard): switch img src to backend proxy to avoid CORS errors#378
zigzagdev wants to merge 2 commits into
chore/proxy-adapt-image_urlfrom
fix/heritage-card-proxy-url

Conversation

@zigzagdev
Copy link
Copy Markdown
Owner

Summary

  • item.thumbnailUrl(直接 UNESCO CDN URL)→ バックエンドプロキシ ${VITE_API_BASE_URL}/api/v1/heritage-image/${item.id} に変更
  • referrerPolicy="no-referrer" を削除し crossOrigin="anonymous" を追加(プロキシが返す Access-Control-Allow-Origin と対になる)
  • useState<boolean>isImgError を管理し、プロキシ失敗時に onError でプレースホルダー SVG を表示

Why

直接 UNESCO CDN を参照すると、ブラウザの CORS/CORP 制限でブロックされる環境がある。バックエンドプロキシ経由にすることで Laravel の HandleCors ミドルウェアが適切なヘッダーを付与し、ブロックを回避する。

Test plan

  • カード一覧で画像がプロキシ経由で表示されること
  • バックエンドが落ちているときにプレースホルダー SVG が表示されること
  • ネットワークタブで img リクエストが /api/v1/heritage-image/ に向いていること
  • CORS エラーがコンソールに出ないこと

関連

Closes #376
Depends on #377 (VITE_API_BASE_URL の定義)
Part of #374

🤖 Generated with Claude Code

Replace direct UNESCO CDN URL (item.thumbnailUrl) with the backend proxy
endpoint /api/v1/heritage-image/{id}. Add isImgError state so the
placeholder SVG is shown when the proxy itself fails. Replace
referrerPolicy="no-referrer" with crossOrigin="anonymous" to pair with
the Access-Control-Allow-Origin header the proxy returns. Resolves #376.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant