nextjs network_error ai_generated partial

Error: Image optimization failed for URL '...' with status 403. The remote server blocked the request.

ID: nextjs/invalid-image-optimization-url

Also available as: JSON · Markdown · 中文
75%Fix Rate
82%Confidence
1Evidence
2023-11-10First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —
[email protected] active — — —

Root Cause

Next.js Image component tries to optimize remote images by fetching them, but the remote server's firewall or CORS policy blocks requests from the Next.js server, typically due to missing or incorrect User-Agent headers.

generic

中文

Next.js 图像组件尝试通过获取远程图像来优化它们，但远程服务器的防火墙或 CORS 策略阻止了来自 Next.js 服务器的请求，通常是由于缺少或不正确的 User-Agent 标头。

Official Documentation

https://nextjs.org/docs/app/api-reference/components/image#remote-patterns

Workarounds

  1. 85% success Configure a custom loader in next.config.js that sets the proper User-Agent header when proxying requests to the remote server. 
    Configure a custom loader in next.config.js that sets the proper User-Agent header when proxying requests to the remote server.
  2. 80% success Use a reverse proxy or middleware to fetch the image with a custom User-Agent before passing it to the Image component. 
    Use a reverse proxy or middleware to fetch the image with a custom User-Agent before passing it to the Image component.

中文步骤

  1. Configure a custom loader in next.config.js that sets the proper User-Agent header when proxying requests to the remote server.
  2. Use a reverse proxy or middleware to fetch the image with a custom User-Agent before passing it to the Image component.

Dead Ends

Common approaches that don't work:

  1. 50% fail

    This only configures allowed domains for the Image component, but doesn't change the request headers that the server sends when fetching the image.

  2. 30% fail

    This bypasses optimization entirely, which defeats the purpose and may degrade performance. It's a workaround but doesn't fix the root cause.