Axios HTTP requests returns into an error (Access-Control-Allow-Origin)

Question

I'm trying to make http post requests with Axios in JavaScript. The request was working fine, but then I tried to use cookies. As my backend I'm using an Express/Nodejs Server on http://localhost:8000, while my frontend is a react npm test server on http://localhost:3000.

My backend looks like this:

const express = require('express');
const cookieparser = require('cookie-parser');
const cors = require('cors');

const app = express();
app.use(cookieparser());
app.use(cors());

app.post("/request/status/check", (req, res) => {
    if(req.cookies.gitEmployee != null){
        res.status(200).send({res: 1, employeeName: req.cookies.gitEmployee.username, fullname: req.cookies.gitEmployee.fullname});
    } else if(req.cookies.gitCompany != null){
        res.status(200).send({res: 2, companyName: req.cookies.gitCompany.companyName, fullname: req.cookies.gitCompany.fullname});
    }else{
        res.status(200).send({res: 0});
    }
});

app.post("/request/testcookie", (req, res) => {
    res.cookie("gitEmployee", null);
    res.cookie("gitEmployee", {
        username: "testusername",
        fullname: "Test Username"
    }).send({res: 1});
});

So, as a short description: I'm setting a test cookie by posting a request to http://localhost:8000/request/testcookie. The response should be an JSON object where res = 1. Also, I'm trying to get information out of the cookie by posting a request to http://localhost:8000/request/status/check. In this case the response should be the object {res:1 , employeeName: "testusername", fullname: "Test Username"}.

I tried this concept with a REST Client called Insomnia (something like Postman) and it worked perfectly.

Then I wrote a helper-class for my React Application and for the Http request I'm using Axios.

import axios from 'axios';

class manageMongo {
    authstate(){
        return new Promise((resolve, reject) => {
            axios("http://localhost:8000/request/status/check", {
                method: "post",
                data: null,
                headers: {
                    "Access-Control-Allow-Origin": "*"
                },
                withCredentials: true
            })
            .then(res => {
                    console.log(res.data);
                    if(res.data.res === 0){
                        resolve(false);
                    }
                    if(res.data.res === 1){
                        resolve(true);
                    }
                    if(res.data.res === 2){
                        resolve(true);
                    }
            });   
        });
    }
    setTestCookie(){
        axios("http://localhost:8000/request/testcookie", {
            method: "post",
            data: null, 
            headers: {"Access-Control-Allow-Origin": "*"},
            withCredentials: true
        })
        .then(res => { console.log(res)});
    }
}
export default manageMongo.prototype;

When I execute these functions, I'm getting the same error of both of them (of course with different urls):

Failed to load http://localhost:8000/request/testcookie: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

I already know that it's because of the withCredentials setting in the requests. I added these settings because I want to pass cookies through these requests and if I don't add withCredentials, the /request/status/check request always returns {res: 0} even if I set a cookie before.

I don't know, if this will change if the I set withCredentials = true but i read that in multiple threads. If you know an other working method to pass cookies through these requests even without axios please share it here! Because that is, what I want to achieve.

Eridanis Eridanis · Accepted Answer · 2017-11-03T15:21:17

The problem seems to be you have set 'Access-Control-Allow-Origin': * Try setting it to your actual origin, for example 'Access-Control-Allow-Origin': 'http://localhost:8000' or 'Access-Control-Allow-Origin': 'http://localhost:3000'

Whichever the request originates from.

Axios HTTP requests returns into an error (Access-Control-Allow-Origin)

1 Answers