React：API url 在 GET 请求中有效，但在 POST 请求中被更改

Question

我正在尝试为我的 React 应用程序设置 api 网址。 GET 端点工作完美，但是当我发出 post 请求时，URL 毫无理由地成为本地主机 URL。

我正在使用一个 Constants.js 文件，我在其中检查节点环境是在开发中还是在生产中。这是他们在生产中的样子。

const dev = {
  url: "http://127.0.0.1:8000/",
};

const prod = {
  url: "https://myapp.herokuapp.com/",
};

console.log(process.env.NODE_ENV);

export const config = process.env.NODE_ENV === "development" ? dev : prod;

目前我将它们倒置以便我可以向 heroku 上的服务器发出请求。

const prod = {
  url: "http://127.0.0.1:8000/",
};

const dev = {
  url: "https://myapp.herokuapp.com/",
};

console.log(process.env.NODE_ENV);

export const config = process.env.NODE_ENV === "development" ? dev : prod;

在这里，我正在导入配置并使用变量发出 GET 请求，效果非常好。

export const loadUser = () => (dispatch, getState) => {
  dispatch({ type: USER_LOADING });

  axios
    .get(`${config.url}accounts/api/auth/user`, tokenConfig(getState))
    .then((res) => {
      dispatch({
        type: USER_LOADED,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch(returnErrors(err.response.data, err.response.status));
      dispatch({
        type: AUTH_ERROR,
      });
    });
};

这就是奇怪的地方。当我发出 POST 请求时，URL 被更改为本地主机。

export const login = (username, password) => (dispatch) => {
  const config = {
    headers: {
      "Content-Type": "application/json",
    },
  };

  const body = JSON.stringify({
    username,
    password,
  });

  axios
    .post(`${config.url}accounts/api/auth/login`, body, config)
    .then((res) => {
      dispatch({
        type: LOGIN_SUCCESS,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch(returnErrors(err.response.data, err.response.status));
      dispatch({
        type: LOGIN_FAILED,
      });
    });
};

这是我在控制台中得到的错误

VM159:1 POST http://localhost:3000/undefinedaccounts/api/auth/login 404 (Not Found)

如您所见，URL 已更改为本地主机，并且未定义的内容已传递给 URL，我不知道它来自何处。

如果有人知道这里发生了什么，我将不胜感激，谢谢。

Answer 1

解决此问题的最简单方法是设置 baseURL:

或者作为 default config:

axios.defaults.baseURL = 'https://api.example.com';

或者，作为您的 axios 自定义的 baseURL instance:

const instance = axios.create({
  baseURL: 'https://api.example.com'
});

您的代码中的问题：

当你写道：

axios.post(`${config.url}accounts/api/auth/login`, body, config)...

其中 config 是：

const config = {
    headers: {
      "Content-Type": "application/json",
    },
  };

它只有“headers”，因此“url”就是undefined。要修复它，您还应该在 config object.

中添加“url” 属性

React：API url 在 GET 请求中有效，但在 POST 请求中被更改

React: API url works in GET request but it gets changed in POST request

node.js

reactjs

url

axios

apprequests

您的代码中的问题：