使用Axios在React(Vite)中调用Directus API接口失败

• 核心错误：请求地址缺少协议头
  你在Axios请求里写的地址是comfy-store.directus.app/items/products，没加https://前缀。浏览器会把这个地址当成相对路径处理，实际请求的是当前Vite开发服务器的地址（比如http://localhost:5173/comfy-store.directus.app/items/products），这个路径不存在，所以服务器返回了Vite的默认HTML页面。

• 修正后的代码
  给请求地址加上完整的https://协议头，确保请求指向正确的Directus API：

import axios from 'axios';

function App() {
  const apiTest = async () => {
    try {
      const res = await axios.get('https://comfy-store.directus.app/items/products');
      console.log(res.data);
    } catch (e) {
      console.error('请求出错:', e);
    }
  };

  apiTest();

  return (
    <div>
      Test
    </div>
  );
}

export default App;

• 额外提示
  • 如果之后遇到跨域报错，需要在Directus后台的CORS配置里，把你的Vite开发服务器地址（比如http://localhost:5173）加入允许列表。
  • 建议把API地址抽成环境变量，方便切换开发/生产环境。比如在.env文件里定义VITE_API_BASE_URL=https://comfy-store.directus.app，代码里用import.meta.env.VITE_API_BASE_URL + '/items/products'来拼接请求地址。

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