maybe one of our next projects could be a VueJS driven SPA (no PHP) on the frontend w/ Laravel API on the backend. I'm now curious about how to allow specific parts of that website to communicate with backend but prevent 3rd party services to use the same API.
I would like to give an example: Let's say we have a chart on our homepage (no login or something, visible to anybody) that gets its data from an axios API call. How can I prevent people from using this exact same endpoint for their own website? I mean there are technologies like oath2 and JWT tokens, but for me they won't solve this specific problem.
As a potential "thief" you can open your Chrome dev tools network tab and check the requested URL. Then you could use the exact same URL to get this data.
Do you have any idea how to solve this or isn't it solvable simply by design?
Thanks a lot!