从Strapi API获取数据时出现Localhost错误，求解决方案

我在React项目中调用本地Strapi API获取产品数据时出现Localhost相关错误，已配置环境变量但问题未解决，相关信息如下：

相关代码 #

import React, { useEffect, useState } from "react";
import Card from "../Card/Card";
import "./Featuredproducts.scss";
import axios from "axios";

function Featuredproducts({ type }) {
// Fetching Data From API
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await axios.get(
          process.env.REACT_APP_API_URL + "/products",
          {
            headers: {
              Authorization: "bearer" + process.env.REACT_APP_API_TOKKEN,
            },
          }
        );
        console.log(data);
      } catch (err) {
        console.log(err);
      }
    };
    fetchData();
  }, []);

  return (
    <div className="featuredProducts">
      <div className="top">
        <h1>{type} products</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque
          laudantium similique laborum sequi dolores quam qui ullam, obcaecati
          placeat tempora distinctio voluptatum repellat veritatis minima beatae
          recusandae, necessitatibus alias esse quisquam eaque harum vero vel?
        </p>
      </div>
      <div className="bottom">
        {data.map((item) => (
          <Card item={item} key={item.id} />
        ))}
      </div>
    </div>
  );
}

export default Featuredproducts;

环境变量配置 #

REACT_APP_API_URL = http://localhost:1337/api

排查与解决步骤 #

1. 确认Strapi服务状态 #

• 检查Strapi控制台是否输出Server is running on http://localhost:1337，确保端口1337未被其他程序占用。
• 直接在浏览器访问http://localhost:1337/api/products，验证API端点是否能正常返回数据。若返回404，需检查Strapi产品内容类型的路由权限是否开启了find操作。

2. 修复环境变量问题 #

• 移除REACT_APP_API_URL值前后的空格，正确格式应为：

  REACT_APP_API_URL=http://localhost:1337/api
  

• 重启React开发服务器，确保环境变量生效。

3. 解决CORS跨域问题 #

• 进入Strapi后台，依次打开Settings > Security > CORS，将React本地服务地址（通常为http://localhost:3000）添加到Allowed origins列表，保存后重启Strapi服务。

4. 修正代码中的错误 #

• Authorization头格式错误：bearer后需添加空格，且变量名拼写修正为REACT_APP_API_TOKEN（原代码为TOKKEN）：

  Authorization: `bearer ${process.env.REACT_APP_API_TOKEN}`
  

• 未更新组件状态：获取数据后需将结果存入products state：

  setProducts(response.data.data); // Strapi v4响应结构为data.data
  

• 渲染时使用未定义变量：将data.map改为products.map，因为组件内只有products state存储数据。

修正后的完整代码 #

import React, { useEffect, useState } from "react";
import Card from "../Card/Card";
import "./Featuredproducts.scss";
import axios from "axios";

function Featuredproducts({ type }) {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `${process.env.REACT_APP_API_URL}/products`,
          {
            headers: {
              Authorization: `bearer ${process.env.REACT_APP_API_TOKEN}`,
            },
          }
        );
        setProducts(response.data.data);
        console.log(response.data.data);
      } catch (err) {
        console.error("获取产品数据失败:", err);
      }
    };
    fetchData();
  }, []);

  return (
    <div className="featuredProducts">
      <div className="top">
        <h1>{type} products</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque
          laudantium similique laborum sequi dolores quam qui ullam, obcaecati
          placeat tempora distinctio voluptatum repellat veritatis minima beatae
          recusandae, necessitatibus alias esse quisquam eaque harum vero vel?
        </p>
      </div>
      <div className="bottom">
        {products.map((item) => (
          <Card item={item} key={item.id} />
        ))}
      </div>
    </div>
  );
}

export default Featuredproducts;

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