React开发Directus模块扩展：数据获取失败的解决方案咨询

你的axios请求无结果的核心原因 #

直接用axios请求http://localhost:8055/items/level大概率是两个问题：

• 缺少认证信息：Directus API需要权限验证，Postman里你可能已经配置了token，但你的axios请求没带，接口实际返回未授权（只是catch里直接返回err没打印，你看不到报错详情）。
• 跨域限制：扩展运行在Directus管理界面的域名环境下，浏览器会对跨域请求做校验，导致请求被拦截。

推荐的Directus扩展专属数据获取方式 #

Directus为扩展开发提供了内置的API调用工具，无需自行配置axios，自动处理认证和同源问题：

1. React组件中用useApi钩子（最常用） #

从扩展SDK导入useApi，直接调用内置客户端，路径和认证都自动处理：

import { useApi } from '@directus/extensions-sdk';

function YourExtensionComponent() {
  const api = useApi();

  async function getData() {
    try {
      const response = await api.get('/items/level');
      return response.data;
    } catch (err) {
      console.error('获取数据失败:', err);
      throw err;
    }
  }

  // 组件内调用示例
  useEffect(() => {
    getData().then(data => console.log(data));
  }, []);

  return <div>你的扩展组件内容</div>;
}

2. 非组件环境调用API实例 #

如果是工具函数或非React场景，可通过扩展上下文获取API实例：

import { initializeApp } from '@directus/extensions-sdk';

async function getData() {
  const app = initializeApp();
  const api = app.api;

  try {
    const response = await api.get('/items/level');
    return response.data;
  } catch (err) {
    console.error('获取数据失败:', err);
    throw err;
  }
}

若坚持用axios，修正你的代码 #

要继续用axios的话，需带上认证token并改用相对路径规避跨域：

import axios from 'axios';

async function getData() {
  try {
    // 从Directus全局对象获取当前用户token
    const token = window.directus.user.token;
    const response = await axios.get('/items/level', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    return response.data;
  } catch (err) {
    console.error('请求错误:', err);
    return err;
  }
}

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