node.js - 使用 MERN 堆栈构建相对路径的最合适方法是什么？

Question

我正在部署 MERN 应用程序，并正在寻找有关构建 API 与 React 路由相对路径的最佳方法的指导。以下是我的两条路线的子集。我的相对路线复制了文件夹结构，我不确定如何解决这个问题。

用户路由

module.exports = app => {
  app.get("/api/users", UserController.index);
...
};

用户操作

export const fetchUsers = () => async dispatch => {
  const response = await axios.get("api/users");
  dispatch({ type: FETCH_USERS, payload: response.data });
};

当我从 /users React 路由调用 fetchUsers 操作时，会出现此问题。当我希望将请求发送到 /api/users 时，相对路由会将请求定向到 /users/api/users。

更新

我通过使用 API 调用的 baseurl 实例化一个 axios 对象解决了这个问题。

Axios实例、API

import axios from "axios";

let URL = "";

if (process.env.NODE_ENV === "production") {
  URL = "herokuapp/api";
} else {
  URL = "http://localhost:3000";
}
export default axios.create({
  baseURL: URL
});

更新用户操作

export const fetchUsers = () => async dispatch => {
  const response = await rumbanroll.get("api/users");
  dispatch({ type: FETCH_USERS, payload: response.data });
};

Answer 1

如果您的 API 与您的客户端托管在同一域中，那么您可以使用绝对 URL 来访问 API，而不是像您在 axios URL 中编写的相对 URL

export const fetchUsers = () => async dispatch => {
  const response = await axios.get("/api/users"); // notice the / before api
  dispatch({ type: FETCH_USERS, payload: response.data });
};