解決Next.js中圖片CORS問題：一個常見錯誤的快速修復

開發使用Next.js的Web應用時，處理來自不同源的圖片可能會遇到CORS（跨源資源共享）問題。本文探討了當<img>標籤使用crossorigin="anonymous"時發生的一個常見問題，以及如何快速解決。

問題與解決

在Next.js項目中，使用<img crossorigin="anonymous">加載外部圖片時，若伺服器未正確設置CORS頭部，可能導致除首張外的圖片無法顯示。

快速修復

• 移除crossorigin="anonymous": 當不需要跨域憑證時，直接移除此屬性。
• 服務器配置: 確保伺服器返回正確的Access-Control-Allow-Origin頭部。

crossorigin屬性

最佳實踐

使用Next.js的next/image組件自動處理圖片優化和CORS問題，並確保伺服器適當處理CORS請求。

結論

理解CORS政策對於現代Web開發至關重要。本文提供了一個針對Next.js中圖片加載CORS問題的快速修復方法，幫助開發者有效解決類似挑戰。