Lior Lior - 1 month ago 23
React JSX Question

Ajax With ReactJS to NodeJS

I'm using webpack-dev-server while developing in ReactJS.

I also want to add a backend which will be written in NodeJS.

When I run the webpack-dev-server it binds to port 8080.

When I run node, it can't bind to the same port.

Therefore, I'm unable to perform $.ajax requests due to the SOP.

How do I get over this issue?

NodeJS:

const express = require('express');

const app = express();

app.get('/messages', function(req, res){
res.send('hello world!');
});

let server = app.listen(8081, function() {
const host = server.address().address;
const port = server.address().port;

console.log('Listening at http://%s:%s', host, port);
});


React/JS/Ajax:

$.getJSON('/messages', function(data) {
this.setState({
messages: data
});
}.bind(this));


And I'm running
webpack-dev-server
without any parameters.

Answer

the port of app is different from the portof your server. if you want to keep save port, you can try to use webpack proxy

module.exports = {
    // the other config of your webpack
    devServer: {
        hot: true,
        historyApiFallBack: true,

        proxy: {
            '/message': {
               target: 'http://localhost:8081',
               secure: false,
               changeOrigin: true
            },

        },
    },
}

when you fetch http://localhost:8080/messages, webpack-dev-server will proxy to http://localhost:8080/messages.