'How to hide api endpoints in react fetch api calls so that it is not visible in chrome network tab
I am using fetch() method for calling API's. Now when I visit my website and open chrome's network tab, I can see complete API address is visible. That means anyone can communicate with my backend server. Is there any process to hide my API's ?
Thanks a lot
Solution 1:[1]
You cannot do that, you have to consider that your api is public if you expose it to the web. You can take several steps to limit wrong usage like demanding authentication, rate limiting, permissions on endpoints, etc, but someone can always make requests to it as if it was a browser (on behalf of your react app) making it.
Solution 2:[2]
If the data being fetched is static (not reliant on user input) it can be fetched during build time using the Next's getStaticProps method and thus avoid being detected in the frontend altogether.
Users won't be able to see the actual endpoints which were originally called during build time to be stored for later retrieval in a lib/ directory, meaning no such API calls visible in your browser network tab.
Next is React-based, so it should be a relatively painfree to migrate to from React, depending on the project.
As getStaticProps runs only on the server-side, it will never run on the client-side. It won’t even be included in the JS bundle for the browser, so you can write direct database queries without them being sent to browsers.
This means that instead of fetching an API route from getStaticProps (that itself fetches data from an external source), you can write the server-side code directly in getStaticProps.
Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from getStaticProps. This produces an additional call, reducing performance. Instead, the logic for fetching the data from the CMS can be shared by using a lib/ directory. Then it can be shared with getStaticProps.
https://nextjs.org/docs/basic-features/data-fetching/get-static-props
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | NuLo |
| Solution 2 | Lil Robots |