React POST request is sent without cookie - reactjs

Question

I'm struggling with an Axios POST request that does want to send cookie in its headers.
My API route /search/producers is working with Postman : once logged in, this route answers with correct data.
With Axios POST request, the server can not find req.user because the cookie is not sent.
In my browser, I always get a 401 OPTIONS response.
Response headers :
OPTIONS /search/producers HTTP/1.1
Host: localhost:4242
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
Accept: */*
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type,withcredentials
Referer: http://localhost:3000/home
Origin: http://localhost:3000
Connection: keep-alive
Request headers :
HTTP/1.1 401 Unauthorized
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Content-Type: application/json; charset=utf-8
Content-Length: 28
ETag: W/"1c-IxTdph/1tV0PHzy4xuP38jYWJTg"
Date: Thu, 25 Jun 2020 22:26:37 GMT
Connection: keep-alive
Here is my code server-side :
The function that checks req.user (created with Passport)
function isAuthenticated (req, res, next) {
console.log(req.headers.cookie) // always undefined with Axios request
if (req.user){
return next();
}else{
return res.status(401).json('Denied access')
}
}
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, HEAD, OPTIONS");
next();
});
app.use('/search', isAuthenticated, searchRoutes); // OK with Postman POST, blocks with Axios POST
The route itself :
router.post('/producers', function(req, res) {
if (req.body.product) {
Producers.find({productsCategories: {$regex: req.body.product, $options: 'i'}})
.then(result => {
return res.json(result)
})
.catch(error => {
return res.json("Internal Server Error")
})
}
})
I set up withCredentials: true client-side :
const instance = axios.create({
withCredentials: true,
})
instance
.post("search/producers", { product })
.then(res => {
...
})
All "GET" requests work perfectly, sending the Cookie in request header.
Can you help me to figure out what's wrong or missing in my code please ? Thanks for any idea.
[EDIT] I decided to use npm package cors and it worked :
For those interested :
const cors = require('cors');
const corsOptions = {
origin: 'http://localhost:3000',
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
credentials: true
}
app.use(cors(corsOptions))
Thanks again for your help.

Answer 1

I believe it's related to this issue:
https://github.com/axios/axios/issues/876
replace your API call with the following
axios({
url: API_BASE + "search/producers",
withCredentials: true
method: "POST",
data: qs.stringify(product),
}).then(response => {
...
});