Search code examples
reactjsnode.jstypescriptexpresscors

POSTMAN request keeps hanging after adding types/cors in Express Typescript


I have a React web app with Express TypeScript for the backend. I have one POST request so far and it was working well before this.

issueController.ts

import { RequestHandler } from 'express';
import { Issue } from '../interfaces/issue.interface';

export const createIssue: RequestHandler = (req, res, next) => {
  const issue = req.body as Issue;
  res.status(200).json({message: 'issue created successfully', issue})
};

issue.middlewares.ts

import { Issue } from '../interfaces/issue.interface';
import { Request, Response, NextFunction } from 'express';

export function validateIssueRequest(req: Request, res: Response, next: NextFunction) {
    const issue = req.body as Issue;
    if(!issue) {
        res.status(400).json({ message: 'fail'})
    }
}

issueRoute.ts

import { Router } from 'express';
const router = Router();
import { createIssue } from '../controllers/issueController';
import { validateIssueRequest } from '../middleware/request-validation.middleware';

router.post('/create-issue', validateIssueRequest, createIssue); 

export default router;

index.ts

import express from 'express';
const app = express();
const port = 3001;
import issueRoutes from './routes/issueRoute';
import cors from 'cors';

const allowedOrigins = ['http://localhost:5173'];
const options = {
    origin: allowedOrigins
};
app.use(cors((options)));

app.use(express.json());

app.listen(port, () => {
    console.log(`Listening to port ${port}`)
});

app.use('/issue', issueRoutes);

Problem is the POST request keeps hanging on Postman but it also does not return any error. My package.json looks like this:

package.json

 "devDependencies": {
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.21",
    "@types/node": "^20.11.25",
    "dotenv": "^16.4.5",
    "nodemon": "^3.1.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.4.2"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.3",
    "express-validator": "^7.0.1"
  }

I don't know what is wrong with my code as I have returned a JSON response.


Solution

  • Your validateIssueRequest middleware function doesn't return a response and doesn't call the next function. That's why it hangs.

    From the Express.js documentation:

    If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging.

    You need to call next function from middleware to pass request cycle to createIssue