How to enable all CORS API calls in Nextjs

Question

I want to enable CORS for all sources and destinations from my app.

I am following this https://vercel.com/guides/how-to-enable-cors as my deployment of the Nextjs app is on Vercel.

Below is my next.config.js file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  async headers() {
    return [
      {
        source: '/',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: '*' },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value:
              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig

The aim is to allow Access-Control-Allow-Origin: "*" for all the API calls from the app.

I have tried to implement the solution above but there is a problem. The destination changes with different inputs from the user. I tried just setting the domain as the destination but I get the following error when I try to build: invalid field: destination for route {"source":"/","destination":"https://api.example.com", ... — Little Ball
– Little Ball, Commented Dec 18, 2022 at 22:43

David · Accepted Answer · 2023-04-21 06:16:29Z

-1

It's important to mention that if you work localhost and the localhost domain is not certified it won't work (you can for your localhost a certification and use https://localhost:300.... etc).

so mostly for local host you'll want to use a re-write so the requests is forward not from the browser but from the local server to the external source.

Good luck!

answered Apr 21, 2023 at 6:16

David

1,5711 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Miller Over a year ago

that is a very complex, time consuming solution to what ought to be a very simple problem.

Collectives™ on Stack Overflow

How to enable all CORS API calls in Nextjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related