reactjs 404(找不到您访问的页面)

hivapdat 于 2022-12-03 发布在 React

关注(0)|答案(3)|浏览(116)

我尝试使用axios从后端fatch我的api数据。我收到一个错误，如下所示：
POST http://localhost:3000/undefined/post 404 (Not Found)
API路径如下：

// route middleware
app.use("/api", portRoutes);

// passing on controllers
router.post("/post", create);

// rest of code will have in controller folder

现在我试着在前台工作
我曾用这种方法试过：
.env档案
REACT_APP_API = http://localhost:8000/api
我不知道为什么不访问我的服务器端链接
handleSubmit函数

const handleSubmit = (e) => {
    e.preventDefault();

    // access data from backend
    axios
      .post(`${process.env.REACT_APP_API}/post`, { title, content, user })
      .then((response) => {
        console.log(response);
        setState({ ...state, title: "", content: "", user: "" });
        alert(`Post Title ${response.data.title} is created`);
      })
      .catch((error) => {
        console.log(error.response);
        alert(error.response.data.error);
      });
  };

我确信我的api是好的，我已经检查了我的api与 Postman 软件。

reactjs

来源：https://stackoverflow.com/questions/66444086/post-http-localhost3000-undefined-post-404-not-found

3条答案

按热度按时间

cczfrluj1#

您无法在前端应用程序中从服务器端访问.env文件。
我的建议是在你的前端创建一个配置axios文件

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
});

export default api;

然后在handleSubmit函数中：

const handleSubmit = (e) => {
    e.preventDefault();

    // access data from backend
    api
      .post(`/post`, { title, content, user })
      .then((response) => {
        console.log(response);
        setState({ ...state, title: "", content: "", user: "" });
        alert(`Post Title ${response.data.title} is created`);
      })
      .catch((error) => {
        console.log(error.response);
        alert(error.response.data.error);
      });
  };

赞(0）回复(0）举报 2022-12-03

wgmfuz8q2#

我已经解决了我的错误，从这个链接请随时阅读这篇文章，如果你面临同样的问题，我已经面临。