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

Posted 2023-03-16

【中文标题】反应：API url 在 GET 请求中有效，但在 POST 请求中被更改

【英文标题】：React: API url works in GET request but it gets changed in POST request

【发布时间】：2021-03-13 02:07:16

【问题描述】：

我正在尝试为我的 react 应用设置 api url。 GET 端点工作得很好，但是当我发出一个 post 请求时，URL 毫无理由地变成了 localhost 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.urlaccounts/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 会更改为 localhost。

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

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

  axios
    .post(`$config.urlaccounts/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 被更改为 localhost，并且未定义的 URL 被传递给我不知道它来自何处的 URL。

如果有人知道这里发生了什么，我将非常感谢一些帮助，谢谢。

【参考方案1】：

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

default config:

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

或者，作为你的 axios 自定义 instance 的 baseURL：

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

---

代码中的问题：

你写的时候：

axios.post(`$config.urlaccounts/api/auth/login`, body, config)...

config 在哪里：

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

它只有“标题”，因此“url”就是undefined。要修复它，您应该在 config 对象中添加“url”属性。

【讨论】：

我不知道我是怎么这么盲目的，以至于我没有看到两个变量在不应该有相同名称的情况下具有相同的名称。非常感谢！

这是因为我用 URL 导出的变量也被命名为 config 所以那里有冲突。很难找到这种类型的错误。

我明白了。您可以使用 TypeScript 更快地识别这些错误。另外，将“ESLint”扩展添加到您的 IDE（可能是 VS Code），它也将帮助您编写更好的代码。

是的，我可能很快就会学习打字稿。非常感谢您的帮助，祝您有愉快的一天！