After adding 'Access-Control-Allow-Origin', it says'Access-Control-Allow-Origin' header is present on the requested resource

1

I’m fetching data from my backend api with axios. it’s giving me error that no access-control-allow-origin header present.

middleware code in index.js of backend api

// CORS Middleware
let allowCrossDomain = function(req, res, next) {
  console.log('req received');
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', '"Origin, X-Requested-With, Content-Type, Accept"');
    next();
}
app.use(allowCrossDomain);

buit my browser gives me errors
xhr.js:173 GET https://d52890213a1f40XXXXXXbe65ab4e.vfs.cloud9.ap-southeast-1.amazonaws.com:8080/api/questionset 499
Access to XMLHttpRequest at 'https://d52XXXXXXX2b2295b1abe65ab4e.vfs.cloud9.ap-southeast-1.amazonaws.com:8080/api/questionset' from origin 'https://d52890213a1f40e2b22XXXXXXX4e.vfs.cloud9.ap-southeast-1.amazonaws.com:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Error: Network Error at createError (createError.js:17) at XMLHttpRequest.handleError (xhr.js:87)

my front-end axios code:

export  function apiCall(method, url, data) {
    console.log(method, url, data)
    debugger
    return axios({method, url, data
    })
    .then(res => {
        console.log(res);
        return res.data;
    })
    .catch((err) => {
        console.log(err)
        if (err.response) {
            debugger
            return Promise.reject(err.response.data);
        }
        else if (err.request) {
        debugger
            return Promise.reject(err);
        }
        else {
            debugger
            // console.log('Error', err, err.message, 777);
            return Promise.reject(err);
        }
    });
}

calling function

apiCall('get', `${process.env.REACT_APP_BASE_URL}/api/questionset`, undefined)
            .then(data =>{
                console.log(data);
                if(!data.success){
                    throw Error(data.message);
                }
                else{
                    this.setState({
                        isLoading: false,
                        questionSets: data.questionSets
                    })
                }    
            })
            .catch(err=>{
                debugger
                console.log(err);
                this.setState({
                    isLoading: false
                })
                return this.props.addError(err.message)
                
            });

i also tried some solution stated here. this also gives me same above error
changed code:

axios({method, url, params:{origin:"*"}, data
    })
    .then(res => {
        console.log(res);
        return res.data;
    })
    .catch((err) => {
        console.log(err)
}

another solution

return axios[method]({ url, params:{Origin:"*"}, data
    })
    .then(res => {
        console.log(res);
        return res.data;
    })
    .catch((err) => {
        console.log(err)
}

it gives me weird error. i do’t why it’s redirect
error: `

Error 
Cannot GET /teachers/[object%20Object]
`
2

For testing, a way to bypass this error is with a google chrome plugin.

Over a half a million people are using it. Worked for me.