使用Axios从Strapi获取数据时遇404错误及环境变量问题求助

核心问题1：Vite环境变量前缀错误 #

你用了REACT_APP_API_URL作为环境变量名，但Vite的环境变量必须以VITE_开头，REACT_APP_是Create React App的规则，Vite不会识别这个前缀的变量，所以process.env.REACT_APP_API_URL才会返回undefined。

核心问题2：Strapi API路径错误 #

Strapi默认的API路由前缀是/api，而不是你写的/server，直接访问http://localhost:1337/server返回404，说明这个路径在你的Strapi项目里根本不存在。你的产品接口正确路径应该是http://localhost:1337/api/products。

具体修复步骤： #

1. 修改.env文件
   把变量前缀改成VITE_，并修正Strapi路径：

   VITE_API_URL = http://localhost:1337/api
   VITE_API_TOKEN = 你的Strapi令牌
   

2. 修改代码中的环境变量引用
   把代码里的REACT_APP_替换成VITE_：

   import React, { useEffect, useState } from "react";
   import "./Featured.scss";
   import Card from "../Card/Card";
   import axios from "axios";
   
   useEffect(() => {
       const fetchData = async () => {
         try {
           const data = await axios.get(`${process.env.VITE_API_URL}/products`, {
             headers: {
               Authorization: `bearer ${process.env.VITE_API_TOKEN}`,
             },
           });
           console.log(data)
         } catch (err) {
           console.log(err);
         }
       };
       fetchData();
     }, [])
   

3. 验证路径正确性
   先在浏览器直接访问http://localhost:1337/api/products（如果需要令牌，就在请求头里加上Authorization: bearer 你的令牌），确认能返回数据后再跑前端代码。

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