Ajax mit ReactJS zu NodeJS

Question

Ich benutze Webpack-dev-Server während der Entwicklung in ReactJS.
Ich möchte auch ein Backend hinzufügen, das in NodeJS geschrieben wird.
Wenn ich den Webpack-dev-Server ausführen, bindet es an Port 8080.
Wenn ich Knoten ausführen, kann es nicht an den gleichen Port binden.
Daher kann ich $ .ajax Anforderungen aufgrund der SOP nicht ausführen.
Wie komme ich über dieses Problem hinaus?

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

Reagieren/JS/Ajax:

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

Und ich bin webpack-dev-server ohne Parameter ausgeführt wird.

Answer 1

die port der App aus dem port Ihres Servers unterscheidet. wenn Sie speichern Port behalten möchten, können Sie versuchen, 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 
      }, 

     }, 
    }, 
} 

zu verwenden, wenn Sie http://localhost:8080/messages, webpack-dev-Server-Proxy http://localhost:8080/messages holen.

Answer 2

Ihre Anwendung ist auf Port 8080

Ihr Server ist auf 8081

Wenn Sie von dem Server anzufordern, müssen Sie den Port auf dem Server angeben. Wenn nicht, wird es in den Hafen verlangen Ihre Anwendung ausgeführt wird, die 8080.

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