[FIXED] How to accept requests only from the client

Issue

I'm doing my own project. A simple game on VueJS. And it has registration on JWT. When the user wins/loses, the client sends a corresponding request to the backend to increase the number of wins/defeat in the database.

Making endpoints for this, I realized that I can restrict access to my API to other resources using CORS BUT After all, the user can get his jwt access token from the localStorage or view it in other requests in the network tab. And looking in the same tab, what the request sent when winning looks like, send the same request from the browser console using fetch with the token he received earlier. This way he will be able to increase the number of wins without playing the game. And CORS will not block this request in any way, because the header Origin will be the same.

And so the question is: how can my API accept requests only sent by my game (axios)

Solution

Unfortunately, this isn't possible. As you've noticed, you can send requests straight from the browser console. Moreover, you can change the javascript code during runtime, so you can't even trust your own code. So the only solution is to change the way your application works.
The only source of truth is your server and from there you can decide which player wins or loses. Each turn should be signalised to the server by sending a request or a WebSocket message. When the game finishes, the server should then send a message to your client reporting the score.
In the case of a single-player game, you should verify the player score on the server side by sending all the required information.

Answered By - Bartosz Bieniek

Answer Checked By - Terry (PHPFixing Volunteer)