Next.js CORS error: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Next.js app http://localhost:3000 needs to call an endpoint in http://localhost:3001.

This is the header in the next.config

async headers() {      return [        {          source: '/api/register',          headers: [            {              key: 'Access-Control-Allow-Credentials',              value: 'true',            },            {              key: 'Access-Control-Allow-Origin',              value: 'http://localhost:3000',            },            {              key: 'Access-Control-Allow-Methods',              value: 'OPTIONS, POST',            },            {              key: 'Access-Control-Allow-Headers',              value: 'Content-Type, X-Requested-With',            },          ],        },      ];    },

Getting this error on api call

Access to fetch at 'http://localhost:3001/api/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

How to address the above error? Thanks for your help in advance!