receiving CORS error while running two servers on localhost

Question

I am trying to test an api call being made from reactjs to a node rest layer using axios. I am receiving the following CORS error when I look at the console message from Chrome. I see the following error "Access to XMLHttpRequest at 'http://localhost:5001/api/login' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.". The weird thing is that the code in the catch block is getting called for both methods (the one in the LoginApi is for testing purposes) but the error variable in the catch parameter keeps giving a message saying "error is not defined" when I mouseover it. 1) How is that possible for error to be undefined, if I am in the catch block because an error occurred? 2) How am I getting CORS errors if I am running from localhost and how can I resolve for testing purposes?

Here is the method in my saga file:

function* login(params){
    try {
        const api = new LoginApi();
        const response = yield call(api.login, params);
    } catch (error) {
        debugger;
        yield put({ type: types.ERROR_OCCURRED, error });
    }
}

Here is the method in LoginApi object that is getting called from yield call:

login = async (loginProps) => {
    try {
        let api = axios.create({
            baseURL: 'http://localhost/5001',
            timeout: 100000
        });

        return await api.post(`/api/login`, loginProps);
    } catch (error) {
        debugger;
        throw error;
    }
}

https://stackoverflow.com/questions/18642828/origin-http-localhost3000-is-not-allowed-by-access-control-allow-origin — Vishal-L, Jan 03 '19 at 04:32
Why would an exception be caught and the error object, the parameter of the catch condition be undefined? — user1790300, Jan 03 '19 at 16:09

score 2 · Accepted Answer · answered Jan 03 '19 at 05:12

You can either set the request header (cross origin) by yourself or use the CORS package (npm i cors --save)

without using cors package ->

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    if (req.method === 'OPTIONS') {
        var headers = {};
    // headers["Access-Control-Allow-Origin"] = req.headers.origin;
        headers["Access-Control-Allow-Origin"] = "*";
        headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, 
        OPTIONS";
        headers["Access-Control-Allow-Credentials"] = false;
        headers["Access-Control-Max-Age"] = '86400'; // 24 hours
        res.writeHead(200, headers);
       res.end();
    } else {
        next();
    }
});

If you are using cors (npm i cors --save)

const cors = require('cors') app.use(cors());

for more cors package configuration, just refer https://github.com/expressjs/cors

score 0 · Answer 2 · answered Jan 03 '19 at 04:35

The server that is receiving the request must set CORS headers to let the browser know the server is expecting requests outside of it's domain. You can always set them manually, but if you are using express there is a library that does that easily - https://expressjs.com/en/resources/middleware/cors.html. Most popular node frameworks should have an equivalent.

receiving CORS error while running two servers on localhost

2 Answers2