NEXT JS strapi CORS error

This is a pretty common issue with decoupled front ends, I have found many ways of fixing this, for example:

  • Allowing all origins, on the backend (strapi in this case), not recommended.
  • Creating a proxy for your front end app, which can be hard to mantain

But in fact I recommend NextJS rewrites, the best option for me.

// NextJS Config
beforeFiles: [
      {
        source: '/backend/:path*',
        destination: 'https://my-backend.com/:path*',
      },
],

Note that the ‘source’ is a local address, meaning if you were requesting to https://my-backend/api now you will request to /backend/api on your axios request