I have a React app in which I need to make some API calls which include the API token in the request headers. I'm not concerned about rendering the whole app server-side as I don't care about SEO, performance etc., it's just a hobby app.
The only thing I want to do is make sure that the API calls are done server-side so that the authorisation header is not shown. Is there a way to implement this?
I've tried fetch and axios but they both show the headers in the Network tab.
I only really understand SSR and CSR at a basic level, so I'm not entirely sure if what I want is achievable, or whether server-side API calls require server-side rendering too.
If you are using a client side app, then its not possible to call a api without showing the Authorization header. However you can do one thing is, you can add a node server as a middleware in between you React app and the server. You will call the node server for API and the node will call the actual data server with authorization. In that case, user will not see the authorization key as it will be set by the node server rather than your react app
If youa re concern about security, you also enable **App key ** and App secret and keep them in node server and with every api call, add those **App key ** and App secret with your request.