title: CORS issue: Next.js application
body: <p>I am trying to deploy a Next.js application with Dokku (Heroku). The application was previously deployed to Vercel without error, but on the Dokku deploy CORS is failing. I've made some progress in fixing it.</p>
  <p>The Next.js server communicates with another eternal Python Django API through an API gateway.</p>
  <p>Initially the POST request errored with the &quot;No 'Access-Control-Allow-Origin' header is present&quot; error. I added the headers to <code>moduleExports</code>:</p>
  <p><em>next.config.js</em></p>
  <pre><code>const moduleExports = {
    async headers() {
        return [
        {
          source: &quot;/api/(.*)&quot;,
          headers: [
         { key: &quot;Access-Control-Allow-Credentials&quot;, value: &quot;true&quot; },
         { key: &quot;Access-Control-Allow-Origin&quot;, value: &quot;*&quot; },
         { key: &quot;Access-Control-Allow-Methods&quot;, value: &quot;GET,OPTIONS,PATCH,DELETE,POST,PUT&quot; },
         { key: &quot;Access-Control-Allow-Headers&quot;, value: &quot;X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version&quot; }
        ]
        }
        ]
    },
    async redirects() {
      return [
        {
          source: '/account',
          destination: '/account/profile',
          permanent: true,
        },
      ]
    },
  };
  </code></pre>
  <p>Thereafter I began receiving a new error that the preflight options request did not return 200. I added a check for options requests to my handler:</p>
  <p><em>pages/api/sign-up.js</em></p>
  <pre><code>export default async function handler(req, res) {
  
  if (req.method === 'OPTIONS') {
      res.status(200).end();
  }
  
  const { email, password1, password2, first_name, last_name } = await req.body
  
    const response = await fetch(REGISTRATION_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify( { email, password1, password2, first_name, last_name } ),
    });
  
    const data = await response.json()
    res.status(200).json(data)
  }
  </code></pre>
  <p>At this point, interestingly, the request does make it to the gateway and is accepted and indeed the new user is successfully created at the Django API. However the communication between the next.js server and client still shows a CORS error and the page does not update to show success. The CORS error is back to the first one &quot;No 'Access-Control-Allow-Origin' header is present on the requested resource&quot;. The difference of course is that earlier the user was not created on the Django end.</p>
  <p>My question of course is how can I fix this since I'm out of ideas or things to try now.</p>