使用Directus SDK创建Item时遭遇CORS跨域错误求解决方案

问题原因 #

这个错误是因为Directus服务器未将你的前端域名（http://localhost:3000）加入允许跨域请求的白名单，浏览器因此拦截了请求。

可行解决方案 #

所有方案都需要修改Directus的配置并重启服务，前端代码无需调整：

• 环境变量配置（推荐，通用所有部署方式）
  找到Directus的.env配置文件，添加或更新以下变量：

  CORS_ENABLED=true
  CORS_ORIGIN=http://localhost:3000
  

  若需允许多个域名，用逗号分隔：

  CORS_ORIGIN=http://localhost:3000,https://your-prod-site.com
  

  保存后重启Directus服务。

• 源码部署用配置文件设置
  在项目根目录的directus.config.js（无则新建）中添加CORS配置：

  export default defineConfig({
    cors: {
      enabled: true,
      origin: ['http://localhost:3000'],
    },
  });
  

  多域名直接在数组中追加，之后重启Directus。

• Docker部署场景
  修改docker-compose.yml中Directus服务的环境变量：

  services:
    directus:
      environment:
        CORS_ENABLED: "true"
        CORS_ORIGIN: "http://localhost:3000"
  

  执行docker-compose up -d重启容器生效。

额外提示 #

• 注意代码中Subscripber可能是拼写错误（应为Subscriber），虽然不影响CORS，但会导致后续创建Item失败。
• 生产环境不要用*作为CORS_ORIGIN，必须指定具体域名，避免安全风险。

内容的提问来源于stack exchange，提问作者Sreynin Pon