NodeJS net::ERR_CONNECTION_REFUSED na ajax call met ReactJS

[Ronnyrr]

Hi Tweakers,

Momenteel ben ik bezig met een het proberen te bouwen van een webapp en het leren van React! Voor de serverside gebruik ik NodeJS en ReactJS dus aan de clientside (samen met jQuery). Ik loop tegen problemen aan met het uitvoeren van Ajax calls.

Een voorbeeld van mijn ajax code:

JavaScript:

    loadQuestionsFromServer: function() {
        if(this.state.request) this.state.request.abort();

        this.state.request = $.ajax({
            url: '/api/questions/',
            dataType: 'json',
            cache: false,
            success: function(obj) {
                this.setState({ questions: obj });
            }.bind(this),
            error: function(xhr, status, err) {
                console.error('/api/questions', status, err.toString());
            }.bind(this)
        });
    }

De code wordt wél uitgevoerd en er wordt data opgehaald. Ook in de POST variant word de code uitgevoerd en het bestand geupdate. Echter blijft mijn console een error loggen: `net::ERR_CONNECTION_REFUSED`. Het lukt mij niet deze goed te debuggen of op te lossen.



De ajax call leest een bestand uit en returnt de waarde hiervan.

JavaScript:

    var QUESTION_FILE = path.join(__dirname, '../public/questions.json');

    router.get('/questions', function(req, res) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Cache-Control', 'no-cache');

        fs.readFile(QUESTION_FILE, function(err, data) {
            if (err) {
                console.error(err);
                process.exit(1);
            }

            res.json(JSON.parse(data));
        });
    });

Na veel Google werk vond ik een aantal oplossing. De meeste oplossing met deze error icm Node en Ajax waren gericht op het gebruik van helaas socket.io.

• Gebruik lokaal IP-adres ipv localhost
• `setHeaders Access-Control-Allow-Origin` (zoals in de code ook te zien is)
• `crossDomain: true` toevoegen aan de ajax call

Helaas lijkt geen van deze oplossingen te werken.
Het is ook lastig te zeggen wanneer de error precies voorkomt. Het gebeurd bij zowel POST als GET. Wanneer de pagina laad `componentDidMount` is er geen error. Zodra de ajax handmatig getriggert wordt komt de error tevoorschijn, maar.. ook niet altijd, het lijkt erop dat dit alleen gebeurd als je het binnen 'x' seconden na elkaar doet.

Alvast bedankt voor de hulp!

EDIT:
Bovenstaande screenshot was uit Chrome. In Firefox is er geen error over net::ERR_CONNECTION_REFUSED, maar wordt alleen de error functie van de ajax call uitgevoerd:



Safari geeft een soortgelijke error als chrome: "Failed to load resource: Geen verbinding mogelijk met de server"

[ Voor 10% gewijzigd door Ronnyrr op 01-03-2016 11:24 ]

[Merethil]

Je router bindt op /questions, maar je roept /api/questions aan. Weet je zeker dat dat je bedoeling is?

[Ronnyrr]

@Merethil
Wellicht kan dit inderdaad onduidelijk overkomen sorry hiervoor.
Maar in mijn server.js rewrite ik alles van /api naar een specifieke router. In die router staat bovenstaand stukje code welke uitgevoerd wordt op /questions: /api/questions

Zoals ik zei werken de functies ook wél degelijk. Alleen blijf ik wél met een error zitten..

[GlowMouse]

Duidelijker kan de melding niet zijn. Je serverproces luistert niet op localhost:3000.

[Ronnyrr]

GlowMouse schreef op dinsdag 01 maart 2016 @ 12:49:
Duidelijker kan de melding niet zijn. Je serverproces luistert niet op localhost:3000.

@GlowMouse
Thanks voor je reply, maar kun jij uitleggen waarom de acties dan wél worden uitgevoerd?
In eerste instantie zouden er namelijk helemaal geen vragen getoond moeten worden, maar deze haalt hij wel degelijk op.

Tevens heb ik in mijn Node server.js:

JavaScript:

app.listen(3000, function() {
    console.log('Server is gestart op: localhost:3000');
});

Mocht je een oplossing, of ergens een uitleg weten over hoe ik dit kan oplossen hoor ik het graag!

[ Voor 17% gewijzigd door Ronnyrr op 01-03-2016 13:28 ]

[Rotje333]

Ik zie dat je je dataType op JSON hebt staan, weet je 100% zeker dat je API een valide JSON response geeft?

[GlowMouse]

Ronnyrr schreef op dinsdag 01 maart 2016 @ 13:28:
[...]


@GlowMouse
Thanks voor je reply, maar kun jij uitleggen waarom de acties dan wél worden uitgevoerd?
In eerste instantie zouden er namelijk helemaal geen vragen getoond moeten worden, maar deze haalt hij wel degelijk op.

Wellicht is er een fallbackverbinding.

Tevens heb ik in mijn Node server.js:

JavaScript:

app.listen(3000, function() {
    console.log('Server is gestart op: localhost:3000');
});

Met netstat kun je zien op welke interface er wordt geluisterd. Daarnaast kan een firewall de verbinding blokkeren.

[Ronnyrr]

Rotje333 schreef op dinsdag 01 maart 2016 @ 13:58:
Ik zie dat je je dataType op JSON hebt staan, weet je 100% zeker dat je API een valide JSON response geeft?

@Rotje333
Yes 100% sure. Heb het bestand zelf aangemaakt en ook http://jsonlint.com keurt hem goed

GlowMouse schreef op dinsdag 01 maart 2016 @ 14:07:
Wellicht is er een fallbackverbinding.

[...]

Met netstat kun je zien op welke interface er wordt geluisterd. Daarnaast kan een firewall de verbinding blokkeren.

@GlowMouse
Van een fallback verbinding ben ik niet bekend (deze heb ik zelf in ieder geval niet ingebouwd).
Ik maak gebruik van OSx, via Google zie ik dat dat netstat alleen voor Windows en Linux is? Wel vond ik een command line die hetzelfde schijnt te doen, al werd ik daar niet veel wijzer van..
Zou je hier een uitleg van kunnen geven? Onderstaand wordt getoond na `lsof -i :3000`



Ik maak ook geen gebruik van een Firewall.

[Rotje333]

Apart verhaal, heb je al geprobeerd om een Content-Type header mee te sturen met de response?

En als je een zelfde request stuurt via een applicatie als bijvoorbeeld Postman, doet dan alles wat het moet doen?

[simon]

Je kan met Paw of Curl je requests nabouwen. Paw is een eenvoudige tool om requests naar je api na te bouwen, en ze zo te debuggen. Want aan de hand van wat ik hier lees heb ik verder geen idee.

[Ronnyrr]

simon schreef op dinsdag 01 maart 2016 @ 15:39:
Je kan met Paw of Curl je requests nabouwen. Paw is een eenvoudige tool om requests naar je api na te bouwen, en ze zo te debuggen. Want aan de hand van wat ik hier lees heb ik verder geen idee.

Rotje333 schreef op dinsdag 01 maart 2016 @ 15:36:
Apart verhaal, heb je al geprobeerd om een Content-Type header mee te sturen met de response?

En als je een zelfde request stuurt via een applicatie als bijvoorbeeld Postman, doet dan alles wat het moet doen?

@simon @Rotje333
Heb zowel Paw als Postman geprobeerd, thanks voor deze suggesties! Beide geven een OK als response bij zowel GET als POST. Ook als ik super snel achter elkaar de gegevens ophaal.

Beide programma's geve ook aan dat mijn handmatig toegevoegde headers worden meegestuurd (Postman voorbeeld):


Conclusie, ik ben ten einde raad..
Eeuwige credits voor degene met een oplossing

[Rotje333]

Ik begin nu toch wel erg nieuwsgierig te worden, ben je bereid om je volledige broncode te delen, eventueel via een PM?

[André]

Even een redelijk blinde gok: je krijgt deze melding "ERR_CONNECTION_REFUSED". Maar niet in alle browsers of situaties. Heeft het dan niet met beveiligingsbeleid te maken? Dat bepaalde browsers een aanroep naar localhost icm poort wel toestaan en andere niet?

[Ronnyrr]

André schreef op dinsdag 01 maart 2016 @ 17:21:
Even een redelijk blinde gok: je krijgt deze melding "ERR_CONNECTION_REFUSED". Maar niet in alle browsers of situaties. Heeft het dan niet met beveiligingsbeleid te maken? Dat bepaalde browsers een aanroep naar localhost icm poort wel toestaan en andere niet?

@André
Alle 3 de browsers (Chrome, FF en Safari) geven oók dezelfde error (zie ook images uit eerste post).

• /api/questions error
• /api/update-question error

Alleen Chrome geeft nog een extra line mee net:ERR_CONNECTION_REFUSED.
In alle gevallen word de error functie van de ajax call uitgevoerd.

[Donaldinho]

Ik zie dat je in je code wisselend een trailing slash gebruikt op je /api/questions. Misschien dat daar iets zit?

Verder kan je misschien je rewrite akties loggen/hier posten?

[Ronnyrr]

Het probleem lijkt opgelost te zijn.
Ik runde mijn NodeJS server via nodemon wat het probleem veroorzaakte. Ik had mijn code naar @Rotje333 gestuurd die aangaf alleen via node server.js te runnen.

Nooit gedacht dat dit het probleem had kunnen veroorzaken..
Thanks voor jullie hulp allen.