Lior Lior - 1 year ago 124
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?


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);


$.getJSON('/messages', function(data) {
messages: data

And I'm running
without any parameters.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download