POST http://localhost:3000/undefined/post 404 (Not Found)

Question

我试图通过使用axios从后端获取我的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

现在我已经尝试在前端工作

我已经试过了:

.envfile

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是ok的，我已经用邮差软件检查了我的api。

Answer 1

你不能在前端应用程序中从服务器端访问。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);
});
};

Answer 2

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

谢谢。

Answer 3

这也是由于。env文件在SRC文件夹…将它移出SRC文件夹到主客户端文件夹