'TypeError: res.setHeader is not a function, getting this error on enabling cors

I found many similar problems but couldn't resolve this

My main objective is to make an API request from the client side through which I can send a JSON file to the server which I need to store in the database but Since my front end and backend is Hosted on a different domain I need to enable Cross-Origin Resource Sharing (CORS).
To enable CORS I used the method Configure CORS with Options as specified here(https://stackabuse.com/handling-cors-with-node-js/)

this is how I'm sending post request from my react front-end side, here apiUrl=http://localhost:${port}/apireact;

 fetch(apiUrl, {
              method: 'POST',
              body: JSON.stringify({name: "thunder"}),
            })
              .then(data => console.log(data))
              .catch(err => console.error(err));

code screenshot

my serverside code is this,

import Koa from "koa";
import next from "next";
import Router from "koa-router";
const cors = require('cors')
const originUrl=process.env.HOST;  //HOST=https://<somenumber>.ngrok.io
const app = next({
  dev,
});
app.prepare().then(async () => {
  const server = new Koa();
  const router = new Router();

/********CORS******************/
const corsOptions = {
  origin: originUrl,
  optionsSuccessStatus: 200, // For legacy browser support
  methods: ['GET','POST']
}

server.use(cors(corsOptions));

router.post("/apireact",(req,res)=>{
    res.json({
      message: 'Hello World2'
    });
});
/**************************/

server.use(router.allowedMethods());
  server.use(router.routes());
  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

server code screenshot

on running server I'm getting following error,

TypeError: res.setHeader is not a function
┃       at applyHeaders (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:153:15)
┃       at applyHeaders (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:149:11)
┃       at applyHeaders (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:149:11)
┃       at cors (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:187:7)
┃       at C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:224:17
┃       at originCallback (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:214:15)
┃       at C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:219:13
┃       at optionsCallback (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:199:9)
┃       at corsMiddleware (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\cors\lib\index.js:204:7)
┃       at dispatch (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\koa\node_modules\koa-compose\index.js:42:32)
┃       at C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\@shopify\koa-shopify-auth\dist\src\auth\index.js:111:51
┃       at step (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\tslib\tslib.js:133:27)
┃       at Object.next (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\tslib\tslib.js:114:57)
┃       at C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\tslib\tslib.js:107:75
┃       at new Promise (<anonymous>)
┃       at Object.__awaiter (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\tslib\tslib.js:103:16)
┃       at shopifyAuth (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\@shopify\koa-shopify-auth\dist\src\auth\index.js:40:24)
┃       at dispatch (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\koa\node_modules\koa-compose\index.js:42:32)
┃       at C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\koa\node_modules\koa-compose\index.js:34:12
┃       at Application.handleRequest (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\koa\lib\application.js:168:12)
┃       at Server.handleRequest (C:\Users\Kulbhushan goswami\learning_site\my_email_app\node_modules\koa\lib\application.js:150:19)
┃       at Server.emit (events.js:315:20)

please suggest how can I fix this?

node.jsexpress


Solution 1:[1]

From the documentation https://github.com/koajs/router/blob/master/API.md, the Koa route will look like

router.get('/', (ctx, next) => {
});

And in your code, you use it as

router.post("/apireact",(req,res)=>{
    res.json({
      message: 'Hello World2'
    });
});

I'm guessing that's where the issue is.

Solution 2:[2]

The cors is an express middleware that can not be used directly with koa.

You could use something like koa-connect as below, which is not recommended.

import k2c from 'koa-connect';
app.use(k2c(cors()));

The recommend way is using @koa/cors.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 theekshanawj
Solution 2 fsarter

Related Questions