ReactJSからNodeJSへ

Question

私はReactJSで開発中にwebpack-dev-serverを使用しています。
また、NodeJSで書かれるバックエンドを追加したいと思います。
webpack-dev-serverを実行すると、ポート8080にバインドされます。
ノードを実行すると、同じポートにバインドできません。
したがって、SOPのために$ .ajaxリクエストを実行できません。
この問題を解決するにはどうすればよいですか？

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

が反応/ JS /アヤックス：

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

そして、私はパラメータを指定せずにwebpack-dev-serverを実行していますよ。

Answer 1

である、あなたのアプリがに実行されているポートに要求することになるアプリのportは、サーバーのport異なっています。あなたはポート保存維持したい場合、あなたはhttp://localhost:8080/messagesからhttp://localhost:8080/messages、WebPACKの-devのサーバーするプロキシを取得する際のWebPACKプロキシ

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

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

     }, 
    }, 
} 

を使用しようとすることができます。

Answer 2

アプリがあなたのサーバーは、サーバーから要求したい場合は、サーバーにポートを指定する必要が8081

上にあるポートに8080

です。そうでない場合、それは8080

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