title: Next JS Blocked by CORS: Does not have HTTP ok status
body: <p>I'm using GraphQL to communicate between two domains client and server. I have enabled CORS on my API website following the <a href="https://vercel.com/support/articles/how-to-enable-cors" rel="nofollow noreferrer">vercel documentation</a>, but it seems to throw a <code>blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.</code> error. I have this code in GraphQL:</p>
  <pre><code>function createApolloClient() {
    return new ApolloClient({
      ssrMode: typeof window === &quot;undefined&quot;,
      link: new HttpLink({
        uri: &lt;link&gt;,
        credentials: &quot;include&quot;,
        fetchOptions: {
          mode: &quot;cors&quot;,
        },
      }),
    }),
   ...
  }
  </code></pre>
  <p>And in the API website, the <code>next.config.js</code> file has this:</p>
  <pre><code>module.exports = {
    async headers() {
      return [
        {
          // matching all API routes
          source: &quot;/api/:path*&quot;,
          headers: [
            { key: &quot;Access-Control-Allow-Credentials&quot;, value: &quot;true&quot; },
            {
              key: &quot;Access-Control-Allow-Origin&quot;,
              value: &lt;link&gt;,
            },
            {
              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, Access-Control-Allow-Origin&quot;,
            },
          ],
        },
      ];
    },
  };
  </code></pre>
  <p>Is there something wrong with how I configured my <code>next.config.js</code> file? Or is it in the Apollo Client that is the problem? I don't use Express.</p>