Directus与SvelteKit应用403错误：凭证正确仍无法访问

下面是针对你遇到的403问题的具体排查步骤，都是新手容易踩的坑：

1. 确认SDK初始化的凭证完全正确 #

检查你的initlogin.ts里的配置：

• Directus的API地址是否完整：比如VM部署的Directus通常是http://[你的VMIP]:8055，不要漏了端口号，也不要写错IP。
• 超级用户的邮箱、密码是否和你在Directus后台创建的完全一致，注意大小写、特殊字符有没有打错。

示例正确的初始化代码：

import { createDirectus, rest, authentication } from '@directus/sdk';

const directus = createDirectus('http://你的VMIP:8055')
  .with(rest())
  .with(authentication('json'));

2. 验证超级用户角色对frontPage集合的权限 #

即使是超级用户角色，也可能不小心没给frontPage集合开权限：

• 登录Directus后台，进入「设置」→「角色与权限」
• 找到你创建的超级用户角色，点击「权限」标签
• 找到frontPage集合，确认「读」权限是勾选状态，或者直接选择「全权限」

3. 确保在获取数据前完成登录流程 #

配置凭证不代表自动登录，必须主动调用登录方法获取会话：
比如在SvelteKit的+page.server.ts里：

import type { PageServerLoad } from './$types';
import { directus } from '$lib/initlogin';

export const load: PageServerLoad = async () => {
  // 先登录
  await directus.auth.login({
    email: '你的超级用户邮箱',
    password: '你的超级用户密码'
  });
  
  // 再获取数据
  const frontPageData = await directus.items('frontPage').readByQuery({});
  return { frontPageData };
};

如果是在客户端（浏览器端）登录，注意不要把密码暴露在前端代码里，建议在服务器端完成登录，再把数据传给前端。

4. 检查Directus的CORS配置 #

跨域请求也会导致403错误：

• 登录VM上的Directus，找到.env配置文件
• 确保以下配置正确：

  CORS_ENABLED=true
  CORS_ORIGIN=http://localhost:5173 # 这里填你的SvelteKit开发地址，生产环境换成你的域名
  

修改后重启Directus服务。

5. 确认用户账号已分配超级用户角色 #

你创建了超级用户角色，但要确保对应的账号绑定了这个角色：

• 登录Directus后台，进入「用户管理」→「用户」
• 找到你的超级用户账号，编辑它的「角色」字段，确认选中的是你创建的超级用户角色

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