Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Question

I am using nodejs server, express framework and fetch library to send request to another server which is in different domain. For one of my endpoint consider (localhost:8080/login) i am rendering ejs file when the user clicks login button i am sending a fetch request to an api (https:otherserver.com/login) different server which is in other domain. i am not able to send this request. I am getting this error :

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am not sure how to handle this issue. please suggest some ideas or links which can solve this issue.

Answer 1

You can use cors middleware on your server.

Simplest way to use it is to add :

app.use(cors())

before all of your route handlers.

Answer 2

I found the solution for my problem. I am trying to explain what i understood as i am a beginner in server side and web development.

This was the problem i faced : For one of my endpoint in my nodejs server, consider (localhost:8080/login) i am rendering ejs file when the user clicks login button in that ejs file, i am sending a fetch request to an api (https:otherserver.com/signin) of different server which is in other domain. i am not able to send this request. I was getting cors problem.

Cors problem was occuring because the server domain(my nodejs server) which rendered the ejs file and the other domain(https:otherserver.com/signin) to which i was making fetch request after clicking login button was different.

so solution was :

I need to make the fetch request first to the same domain(my nodejs server localhost:8080/api/signin). And then from this server i should call the api of other domain(https:otherserver.com/signin). By doing this we wont get any cors issue. Because the client side ejs file is requesting to the same server which has rendered the file. And then the server is bypassing the request to the other server.

code from client side javascript file. /api/signin is an endpoint in my local nodejs server and u can add the options:

options ={
    method : 'POST',
    headers : {
         'Accept': 'application/json',
        'Content-Type': 'application/json'
       }

    body : JSON.stringify({
        email_address : emailId,
        password : pwd
    })
};

fetch("/api/signin",options)
.then(function(res) {
    console.log(res);
}).catch(function(error) {
   console.log(error); 
}); 

code from local nodejs server side:

express.use('/api/', function (req, res, next) {
     var options = {
        method : req.method,
        headers :req.headers,
        body : JSON.stringify(req.body)
    }; 

    fetch('https://otherserver.com'+req.path,options)
    .then(response => {         
        return response.json();
    }, error => { console.error(error)})
    .then(function(json){
        res.send(json);
    })
    .catch(function(error) { 
       res.send(error); 
    });

})

Hope this may help someone who is beginner in server development.