Nuxt 3对接Directus站点导航时出现CORS错误求助

问题详情 #

技术栈为Nuxt 3前端 + Docker部署的Directus后端，出现以下异常：

• 直接刷新页面（F5）时，通过@directus/sdk可正常获取并展示Directus数据；
• 使用<NuxtLink>进行页面导航时，无法进入目标路由，控制台抛出CORS相关错误：

  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8055/items/pages/about. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8055/items/index. (Reason: CORS request did not succeed). Status code: (null).

问题原因 #

Nuxt 3的<NuxtLink>属于客户端导航，请求由浏览器直接发起，受浏览器同源策略限制；而页面刷新时属于服务端渲染（SSR）流程，请求由Nuxt服务端发起，不受浏览器CORS规则约束。因此问题根源是Directus未正确配置CORS规则，允许前端域名的客户端请求。

解决方案 #

1. 配置Directus的CORS环境变量 #

针对Docker部署的Directus，修改其环境变量以开启并配置CORS：

• 在docker-compose.yml或Directus的环境配置文件中，添加以下变量：

  DIRECTUS_CORS_ENABLED=true
  DIRECTUS_CORS_ORIGIN=http://localhost:3000  # 替换为你的Nuxt3前端实际地址
  DIRECTUS_CORS_METHODS=GET,POST,PATCH,DELETE,OPTIONS
  DIRECTUS_CORS_ALLOW_HEADERS=Content-Type,Authorization
  

• 重启Directus容器使配置生效：

  docker-compose restart directus
  

2. 检查Directus SDK的Nuxt配置 #

确保SDK在客户端和服务端都能正确初始化：

• 在Nuxt的composables/useDirectus.ts中，基于运行时配置初始化SDK：

  import { createDirectus, rest } from '@directus/sdk';
  
  export const useDirectus = () => {
    const config = useRuntimeConfig();
    return createDirectus(config.public.directusUrl)
      .with(rest());
  };
  

• 在nuxt.config.ts中配置公共运行时变量：

  export default defineNuxtConfig({
    runtimeConfig: {
      public: {
        directusUrl: 'http://localhost:8055'
      }
    }
  });
  

3. 可选：用Nuxt代理转发请求（无法修改Directus配置时） #

如果无法调整Directus的CORS设置，可通过Nuxt代理将客户端请求转发到Directus，绕过浏览器同源限制：

• 安装代理模块：

  npm install @nuxtjs/proxy
  

• 在nuxt.config.ts中配置代理：

  export default defineNuxtConfig({
    modules: ['@nuxtjs/proxy'],
    proxy: {
      '/directus': {
        target: 'http://localhost:8055',
        changeOrigin: true,
        pathRewrite: { '^/directus': '' }
      }
    },
    runtimeConfig: {
      public: {
        directusUrl: '/directus'
      }
    }
  });
  

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