英文:
React API calls work in development and fail in production build
问题
我正在尝试部署一个使用Spring Boot/Hibernate Restful CRUD API的React项目。我在本地运行SQL数据库，并在开发模式下运行我的React应用程序（localhost:3000），可以成功与我的API进行通信。
然而，当我为生产构建我的应用程序（localhost:5000）时，API失败了。API的响应是一个错误代码304。我最好的猜测是与不同端口混淆有关？在开发中，它在端口:3000上按预期工作，在端口:5000上构建后失败。
我以前从未部署过React应用程序，所以感谢任何帮助！
API调用
const apiCall = () => {
fileService
.getUsers()
.then((response) => {
setUsers(response.data); //错误地返回了304错误
})
.catch(function (error) {
console.log(error);
});
};
getUsers()
getUsers() {
return service.getRestClient().get("/api/getAllUsers");
}
getRestClient()
getRestClient() {
if (!this.serviceInstance) {
this.serviceInstance = axios.create({
baseURL: "http://localhost:5000/",
timeout: 10000,
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Credentials": true,
},
});
}
return this.serviceInstance;
}
英文:
I'm trying to deploy a React project with a Spring Boot/Hibernate Restful CRUD API. I'm running the SQL database locally and running my React app in development mode (localhost:3000) allows for successful communication with my API.
However, when I built my app for production (localhost:5000), the API is unsuccessful. The API response is an error code 304. My best guess is that something is getting mixed up with the changing ports? It works as intended in development on port :3000 and fails when built on port :5000.
I've never deployed a React app before so thanks for any help!
API call
const apiCall = () => {
fileService
.getUsers()
.then((response) => {
setUsers(response.data); //Incorrectly returns a 304 error
})
.catch(function (error) {
console.log(error);
});
};
getUsers()
getUsers() {
return service.getRestClient().get("/api/getAllUsers");
}
getRestClient()
getRestClient() {
if (!this.serviceInstance) {
this.serviceInstance = axios.create({
baseURL: "http://localhost:5000/",
timeout: 10000,
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Credentials": true,
},
});
}
return this.serviceInstance;
}
答案1
得分: 6
自发布以来，我了解到在生产版本的React中不能使用代理。在package.json中的"proxy:"仅在开发环境中生效，而在生产环境中不生效。感谢所有人的帮助。
来源：https://create-react-app.dev/docs/proxying-api-requests-in-development/
英文:
Since posting, I learned that you can't use a proxy in a production version of React. "proxy:" in package.json only has an effect in development - not in production. Thanks for everyone's help.
Source: https://create-react-app.dev/docs/proxying-api-requests-in-development/
答案2
得分: 0
首先，我认为你需要确保你的后端确实在5000端口上运行，然后你需要尝试使用类似Postman、高级REST API或Insomnia这样的工具进行简单的请求。
也许你需要在你的计算机防火墙上释放5000端口。
另一个想法是，你需要指定一些标志来使用其他请求的IP/端口，在我的情况下，我使用Angular，需要一些标志：
ng serve --host 0.0.0.0 --disable-host-check
英文:
Ben, first of all, I think that you need to sure that your backend really running on 5000 and after that you need to try a simple request using a tool like postman, advanced REST api or insomnia.
perhaps, you need to release the 5000 port on your computer(firewall).
Other ideia is, you need to specify some flags to use other request ip/port, in my case, I use angular and I needed some flags:
ng serve --host 0.0.0.0 --disable-host-check
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论