ajax - failed to load resource ::netERR_CONNECTION_REFUSED

Question

Webapp/page is able to load data requested from local express api when client/web browser is run from localhost (the server running the express app)- however when pointing a browser from another machine on the network at the server's IP:port to view the webapp, I get an error when the ajax fires:

"failed to load resource ::netERR_CONNECTION_REFUSED"

EDIT: The dev tools in chrome were vague and did not provide much insight into the issue (for me anyway). When viewing same in firefox the network tab of dev tools made issue obvious:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:1337/getDeviceStatusAllCached"

So it was a CORS issue- answer below is what fixed it for me.

relevant code: app.js-

    app.get('/', function(req, res){
        logger.printWriteLine('Issues tracker (re)loaded.', 0);
        res.sendFile(path.join(__dirname, '/views/wallboard.html'));
    })
    
    app.get('/getDeviceStatusAllCached', (req, res) => {
        logger.printWriteLine('Front-end requesting cached data.');
        reqs.retrieveCachedDeviceStatusAll(obj => res.send(obj));
    });

reqs.js -

    retrieveCachedDeviceStatusAll: function (callback) {
            fs.readFile('./data/getDeviceStatusAll.json', 'utf-8', function(err,data){
                if(err) throw err;
                obj = JSON.parse(data);
                console.log(JSON.stringify(data)); 
                callback(obj);
            });
        }

wallboard.html

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <table ... working table stuff>
    </table>
    
    <script>
        var dataArray = [];
        console.log('running ajax');
        $.ajax({
            
            method: 'GET',
            url: 'http://localhost:1337/getDeviceStatusAllCached',
            dataType: "json",
            success:function(response){
                dataArray = response
                buildTable(dataArray)
                console.log(dataArray)
            }
        })
    </script>

`::netERR_CONNECTION_REFUSED` generally means nothing is listening on the specified host + port. Likely you forgot to run the Node app or it crashed and you didn't notice. — Quentin, Apr 14 '22 at 15:04
@Quentin Well, I'm onto the problem and just starting to sort it out, though it's not really relevant to the original question so I'm not sure what to do with this post at this point. I found that the code does work; only when run from http://localhost:1337 (not http://{ip-addr}:1337.. though I need clients to be able to connect to the app/page by using the server's IP address and port (it's an internal app and won't be hosted on a domain name). "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:1337/getDeviceStatusAllCached" — boog, Apr 14 '22 at 15:13
Basically the express server will only serve the response when the client is run on localhost. From another machine on the network I get that CORS error. I added "res.setHeader('Access-Control-Allow-Origin', '*'); ... but still get same error from other machines on the network- though the server can now serve itself when pointing the client to it's own IP address rather than 'localhost'. — boog, Apr 14 '22 at 15:15
Thanks for the link- fixed the issue. Also, I was using 'localhost' in the ajax request on the front-end which needed to be changed to the IP address... duh. Thanks — boog, Apr 14 '22 at 15:36

score 0 · Answer 1 · answered Apr 14 '22 at 16:02

This is what I had to add to my app.js to allow the requests from different origins to read data from api. Specify domain/ip instead of * if you don't want to allow access from any origin.

app.use(function(req,res,next){
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

Also, in my ajax GET request in wallboard.html was using 'localhost:1337' which obviously needed to be changed to the server's IP.

More info on CORS, what it is/why it happens/how to fix it: XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

ajax - failed to load resource ::netERR_CONNECTION_REFUSED

1 Answers1