router handler returns an array of object but client doesn't get them in json though response with 200 status

user_959734 0
Viewed 153

I am implementing a express.js project with Typescript.

I have defined a enum and a interface :

export enum ProductType {
    FOOD = 'food',
    CLOTH = 'cloth',
    TOOL = 'tool'
}

export interface MyProduct {
    type: ProductType;
    info: {
        price: number;
        date: Date;
    };
}

One of my router handler needs to return an array of MyProduct to client. I tried this :

const productArr: MyProduct[] = // call another service returns an array of MyProduct
app.get('/products', (req, res) => {
    res.status(200).send({products: productArr});
});

I use Postman tested this endpoint, it responses with status 200 but with a default HTML page instead of the array of objects in JSON.

enter image description here

What do I miss? Is it because express.js can't automatically parse the enum and interface to json object??

P.S. I have set up json parser, so it is not about that, other endpoints work fine with json response:

const app = express();
app.use(express.json());
...
typescript express node.js json
2 Answers

As mentioned in the comments, your code should work. I'll list some steps which can be used to try to find the problem.

Show debug info

Set DEBUG=* in your environment. DEBUG is an environment variable which controls logging for many Node modules. You'll be able to see the flow of a request through Express. If there is too much info, you can limit the output like so: DEBUG=*,-babel,-babel:*,-nodemon,-nodemon:*,-router:layer,-follow-redirects,-send (use a comma-separated list and put a - in front of any module you'd like to exclude)

This should help you trace the life of a request through the various routers and routes. You're now in a position to...

Check for another route that is short-circuiting the request

The fact that you're seeing an HTML page when the Express route is sending an object might indicate that your request is matching a different route. Look for catch-all routes such as non-middleware app.use() or wildcard routes which appear ABOVE your route.

Other suggestions

Don't explicitly set the status

Adding .status(200) is more code and unnecessary.

Use res.json()

Use .json() instead of .send(). If will always add the Content-Type: application/json header, whereas .send() will not when it cannot determine the content type (e.g. .send(null) or .send('hello') will not set the Content Type header to application/json, which may confuse clients).

user_6757210

As there is a lack of full response headers and server environment, assuming you are using AWS service with reverse proxy. So, there might be few possibilities listed here that need to look upon :

If router handler returns an array of object but client doesn't get them in json though response with 200 status then there might be a reverse proxy acting as a backend server, serving default content with status code 200 for unknown routes from the client. So in this scenario, you need to whitelist a new route in your reverse proxy server, assuming you are using AWS Amplify for API rewrite and redirects then you need to whitelist this route in your AWS amplify settings, or else it will serve the default content like it is happening in current scenrio.

If issue still persists then :

  • Make sure you have proper CORS specification on your server.

  • Make sure productArr is an array returned by service, because if some service returns this value - it might be an unresolved promise. So, proper test cases will help you out here or for debugging purposes set DEBUG=* in your environment and make sure it should return value as expected.

  • Check for another route that is short-circuiting the request: The fact that you're seeing an HTML page when the Express route is sending an object might indicate that your request is matching a different route. Look for catch-all routes such as non-middleware app.use() or wildcard routes that appear above your route.

user_66812840
Related