Next.js <Image>对接Directus报错：‘url参数不被允许’配置问询

我使用Next.js 16.0.1，从Directus的/assets/<id>端点加载图片。Directus资源URL在浏览器中可正常访问（格式：https://<directus-domain>/assets/<id>），但当Next.js尝试对图片进行优化时，发起的请求/_next/image?url=https://<directus-domain>/assets/<id>&w=1920&q=75会被Directus拒绝，返回“url参数不被允许”。

✅ 可用的图片加载方式 #

• 原生<img>标签：

  <img src={`${DIRECTUS_URL}/assets/${id}`} />
  

• Next.js <Image>组件关闭优化：

  <Image src={`${DIRECTUS_URL}/assets/${id}`} alt="image" fill unoptimized />
  

❌ 不可用的方式（开启Next.js图片优化时） #

<Image src={`${DIRECTUS_URL}/assets/${id}`} alt="image" fill />

我的Next.js配置 #

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "<directus-domain>",
      pathname: "/assets/**",
    },
  ],
}

核心疑问 #

如何配置Directus以允许类似/_next/image?url=https://<directus-domain>/assets/<id>的请求，避免被“url参数不被允许”拒绝？需要更新哪些Directus .env设置或进行其他操作？

解决方法 #

要让Directus放行Next.js的图片优化请求，需要调整Directus的CORS和URL白名单配置，具体步骤如下：

1. 修改Directus的.env环境变量
   添加或更新以下配置项：

   # 开启CORS功能
   CORS_ENABLED=true
   # 指定允许跨域请求的Next.js应用域名，本地开发可设为http://localhost:3000
   CORS_ORIGIN=https://your-nextjs-app.com
   # 允许必要的请求头
   CORS_ALLOW_HEADERS=Origin,Content-Type,Authorization,Range
   # 将Directus自身域名和Next.js域名加入URL允许列表
   URL_ALLOW_LIST=your-directus-domain.com,your-nextjs-app.com
   

   注意：生产环境不建议用*作为CORS_ORIGIN或URL_ALLOW_LIST的值，需指定具体域名。

2. 重启Directus服务
   修改完环境变量后，必须重启Directus服务才能让配置生效。

3. 验证效果
   重启后再次使用开启优化的Next.js <Image>组件，检查请求是否能正常返回图片资源。

补充说明 #

如果使用Directus Cloud，无需修改本地.env，直接在项目控制台的「设置」中找到CORS和URL允许列表的配置项，按上述逻辑填写对应域名即可。

内容的提问来源于stack exchange，提问作者Ronak Koladiya