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 / AJAX：

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

我在没有任何参数的情况下运行webpack-dev-server。

Answer 1

您的应用程序位于端口8080上。

您的服务器位于8081.

如果要从服务器请求，则需要指定服务器的端口。如果没有，它将向您的应用程序运行的端口请求，即8080。

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

Answer 2

应用的port与您服务器的port不同。如果你想保留保存端口，你可以尝试使用webpack代理

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

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

        },
    },
}

当您获取http://localhost:8080/messages时，webpack-dev-server将代理到http://localhost:8080/messages。

使用ReactJS到NodeJS的Ajax

2 个答案: