Ajax с ReactJS для NodeJS

#ajax #node.js #reactjs

Вопрос:

Я использую webpack-dev-server при разработке в ReactJS.
Я также хочу добавить серверную часть, которая будет написана на NodeJS.
Когда я запускаю webpack-dev-сервер, он привязывается к порту 8080.
Когда я запускаю узел, он не может привязаться к тому же порту.
Поэтому я не могу выполнять запросы $ .ajax из-за SOP.
Как мне решить эту проблему?

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 без каких-либо параметров.

1. Как вы привязываетесь к порту в своем коде nodejs? Можете ли вы показать какой-нибудь код?

2. Отредактировано @FelipeSabino

3. как насчет webpack-dev-server привязки порта?

4. @FelipeSabino я оставил это нетронутым.

5. Можете ли вы показать, что вы там делаете? А также как вы это называете?

Ответ №1:

приложение port отличается от port вашего сервера. если вы хотите сохранить порт сохранения, вы можете попробовать использовать 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
            },

        },
    },
}

при извлечении http://localhost:8080/messages webpack-dev-server будет прокси http://localhost:8080/messages -сервером .

Ответ №2:

Ваше приложение находится на порту 8080.

Ваш сервер находится на 8081.

Если вы хотите запросить с сервера, вам нужно указать порт на сервер. Если нет, он будет запрашивать порт, на котором запущено ваше приложение, то есть 8080.

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