Flask suddenly not receiving request from React client

0
votes

I have React app in front-end (client), calling API provided by Flask back-end (server) via axios package.

Both client and server are running locally. Client: localhost:3000. Server: localhost:5000

The problem is: after many requests, the server can not receive request from client. Here is the picture of the received requests, which is captured in backend:

enter image description here

As you can see, after some success request, the React app stuck with pending request: enter image description here

The lastest request: 127.0.0.1 - - [11/Jun/2020 09:34:39] "GET /posts HTTP/1.1" is error 500, but in network tab of chrome, the request is still pending, so i dont know if the server received that request or not. Nothing shown in console log of chrome, no error printed in backend terminal windows (i have some lines of code to print error in backend), just the error 500

What am i doing wrong? If this question is still confused, please comment below and i can update more info about it. Thank you!

2
reactjsflask
Could you share a little more about what's going in your Flask app? I feel like the problem is likely there :) - JuanCaicedo
I think that your server has received the request because "GET /posts HTTP/1.1" 500 shows up in the logs - JuanCaicedo
i debugged my server and updated the solution in the answer below - Quang Thái

2 Answers

0
votes

The fact that your server is reporting a 500 error, but the request on the client is still pending makes me think that something is wrong on the server side.

To verify this, you can try manually calling raise Exception() in one of your endpoints. Then instead of seeing the error resolve through the react app, you can try calling your endpoint with curl, or a client like Postman. If you are able to see a 500 error there, then the error is likely in your React app. If that request does not resolve, then the error is probably in the server.

Is an error response is being sent to the client? The way to do this in flask is using error handlers.

0
votes

Thank you for helping me.

i debugged my server and found that 2 request call from react app were served by 1 cursor

(i used 1 connector.cursor for the whole connection => 2 request arrives in one moment => the cursor does not know how to serve the result)

=> Solution: change 2 request to 1 new request to new API, in new API, return the result which is containing both result of that 2 request