NextJS：Axios 或 Fetch post 并获取方法结果错误 URL 路径 api

Question

这里我想在 API 上创建一个 post 方法但是当我调用该函数时 posts 到 API[=18= 的错误路径]

这是我的 post

脚本

 //Creating Order
  const createOrder = async (data) => {
    try {
      const res = await axios.post(
        `${process.env.API_ROOT}/api/orders` ||
          `${process.env.LOCAL_URL}/api/orders`,
        data
      );
      if (res.status === 201) {
        router.push(`/api/orders/${res.data._id}`);
        dispatch(reset());
      }
    } catch (err) {
      console.log(err);
    }
  };

我在 Paypal 批准并使用订购按钮时调用了该函数，但是当我按下按钮时 URL API 路径更改为 ${process.env.API_ROOT}/undefined/api/orders 或 ${process.env.LOCAL_URL}/undefined/api/orders 导致此问题的原因是什么？

但是当我使用类似它的工作方式时

//Creating Order
  const createOrder = async (data) => {
    try {
      const res = await axios.post(`/api/orders`,data);  <=====  its working
      if (res.status === 201) {
        router.push(`/api/orders/${res.data._id}`);
        dispatch(reset());
      }
    } catch (err) {
      console.log(err);
    }
  };

Answer 1

那是代码的 front-end 部分，您的 process.env.API_ROOT 解析为未定义。然而，有一种方法可以在前端代码中使用 process.env 变量，您只需要在它们前面加上 NEXT_PUBLIC 前缀，如下所示：

process.env.NEXT_PUBLIC_LOCAL_URL
process.env.NEXT_PUBLIC_API_ROOT

更多信息在 official documentation

NextJS：Axios 或 Fetch post 并获取方法结果错误 URL 路径 api

NextJS: Axios or Fetch post and get method result wrong URL path api

javascript

api

reactjs

next.js