How to restrict access to my Next.js APIs for my application

Question

I am building a Next.js application in which I want to restrict access to my APIs. I only want my application to make those requests.

I once built an app with MERN stack , and I remember I used cors to only allow my domain to make requests to my APIs. But apparantly cors does not work with nextJS, and I tried many npm modules such as nextjs-cors but they didn't work.

I am thinking about using firebase App Check in order to check if this is my app that is making the requests, but I am still hesitant.

What do you think is the optimal and professional solution for this?

PS: Is there a similar behavior to cors in but in NextJS because I also remember cors did not allow postman to make requests as well to my APIs.

Answer 1

That is what API keys are for. Since you have control over both client and server, in client requests you can add a random key to headers when you make request. Then on the server, you can extract the headers console.log(req.headers) , if the headers include the specific key and matching value, you process the request if not you reject the request.