时间戳

首页 > 解决方案 > React/NodeJS 在开发中不会通过 localhost 说话

javascript - React/NodeJS 在开发中不会通过 localhost 说话

问题描述

我正在为我的前端设置一个 Node 后端来提供数据并与 ReactJS 进行通信。最终，我正在开发新的公司软件来取代我们当前的运输系统。

我使用 Amazon EC2 Ubuntu 16.04 - 出于我自己的业务原因 - 我根本无法让我的 ReactJS 前端与 Socket.IO 与我的 nodeJS 后端与http://localhost:4000/上的 Socket.IO 通信。

这是我调用时反应前端中的 App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import ioClient from 'socket.io-client';
import './App.css';

var socket;

class App extends Component {

  constructor() {
    super();
    this.state = {
      endpoint: 'http://localhost:4000/'
    };
    socket = ioClient(this.state.endpoint);
  }

这是我的后端 nodeJS 索引

const mysql = require('mysql');
const http = require('http');
const express = require('express');
const cors = require('cors');

const app = express();
const server = http.createServer(app);
const io = require('socket.io').listen(server);

app.use(cors());

app.get('/', (req, res) => {
    res.send('Server running on port 4000')
});

const sqlCon = mysql.createConnection({
    host: 'localhost',
    user: 'admin-user',
    password: 'admin-pass',
    database: 'sample'
});

sqlCon.connect( (err) => {
    if (err) throw err;
    console.log('Connected!');
});

io.on('connection', (socket) => {
    console.log('user connected');
});

server.listen(4000, "localhost", () => {
    console.log('Node Server Running on 4000')
});

我可以让它通过我的实际公共 IP 地址进行通信，但不能通过 localhost。我真的不想在我的公共 IP 地址上公开我的后端，以便与所有用户进行通信。以前可能有人问过这个问题，但老实说，我在任何地方都找不到明确的答案，现在我已经找了 3 天了。节点执行没有问题，就像我说的，如果我从公共 IP 创建 socket.io 连接，我可以让它进行通信，据我所知，节点运行脚本的其余部分没有问题，因为它连接到mariaDB没问题。

这是我在 Chrome 控制台中不断收到的错误。

polling-xhr.js:271 GET http://localhost:4000/socket.io/?EIO=3&transport=polling&t=MvBS0bE net::ERR_CONNECTION_REFUSED
polling-xhr.js:271 GET http://localhost:4000/socket.io/?EIO=3&transport=polling&t=MvBS3H8 net::ERR_CONNECTION_REFUSED

我暂时通过 npm start 运行 React，所以我的 localhost:3000 被反向代理到 nginx，以便我的 React 前端通过端口 80 在我的公共 EC2 IP 上可见。

任何帮助表示赞赏！

标签： javascriptnode.jsreactjssocketssocket.io

解决方案

这可能是跨源请求问题。您是否尝试在您的应用上启用 CORS。package.json如果你不想在你的应用上启用 cors，你也可以在你的 react 应用中使用代理。

在您的反应应用程序 package.json 中，您可以添加

"proxy":"http://localhost:4000"

推荐阅读