CORS Issue: Unable to send post request using NodeJs and Angular-CodePudding

I am getting this message when trying to send a post request:

Access to XMLHttpRequest at 'http://localhost:3002/api/products/checkout' from origin 
'http://localhost:4200' has been blocked by CORS policy: Request header field content-type 
is not allowed by Access-Control-Allow-Headers in preflight response.

Right now I'm simply trying to send data to my backend and then log it in the console. Get requests work fine but for some reason I get that CORS error when trying post. Here is my code:

Angular code:

//api call
return this.http.post('http://localhost:3000/api/checkout', cart)

NodeJs code:

const bodyParser = require('body-parser');
const express = require('express');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader(
        'Access-Control-Allow-Header', 
        'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader(
        'Access-Control-Allow-Methods', 
        'GET, POST, PATCH, DELETE, OPTIONS');
    next();
})

app.post("/api/checkout", (req, res, next) => {
    const cart = req.body;
    console.log(cart)
    res.status(201).json()
})

module.exports = app;

In the network calls I can see that Request Headers is:

Access-Control-Request-Headers: content-type

while Response Headers is:

Access-Control-Request-Headers: Origin, X-Requested-With, Content-Type, Accept

I'm not sure if content-type being lower case has anything to do with the issue.

CodePudding user response：

You should use req.set instead, just change setHeader to set only. Here is the document https://expressjs.com/en/api.html#res.set

And if you just using localhost, there's another easier option, you can use proxy. More information can be found here https://angular.io/guide/build#proxying-to-a-backend-server

CodePudding user response：

I think the problem that you wrote Access-Control-Allow-Header instead of Access-Control-Allow-Headers, but I cannot test it now.

Be aware that you need to serve OPTIONS requests too. Which is just responding with an empty message body using the same headers. You can get these kind of OPTIONS requests before PUT, PATCH, DELETE from certain HTTP clients e.g. from browsers too.