reactjs expressjs如何设置代理？代理不适用于 localhost:3000，但适用于 localhost:3000/test答案

【问题标题】：reactjs expressjs how to setup proxy? proxy doesn't work with localhost:3000, but works with localhost:3000/testreactjs expressjs如何设置代理？代理不适用于 localhost:3000，但适用于 localhost:3000/test
【发布时间】：2019-03-18 11:41:04
【问题描述】：

尝试使用 reactjs (create-react-app)，现在包括 expressjs。我所做的是

将我的folder/* 移至folder/client/*（删除node_modules）
cd folder/client/ 和 npm install 重新创建 node_modules *它和以前一样工作，应用程序呈现良好
cd folder 和 npm init
npm install express --save
写folder/server.js
在/folder/client/package.json中添加代理设置
npm run start 在/folder 和/folder/client

然后，我去localhost:3000，我得到了reactjs 应用程序，在任何地方都没有快递。然后我去localhost:8080，我得到了明确的结果，这确实是和以前一样的页面，但没有被react执行（这里没有错，我假设）

然后我转到localhost:3000/test，它被代理表达，我在终端中看到server.js的console.log

所以我不能代理localhost:3000，但我可以代理localhost:3000/whatever。 怎么了？

server.js

    const express = require('express');
    const path = require('path'); // haven't installed, should I?
    const app = express();
    app.use(express.static(path.join(__dirname, 'build'))); // of no use here

    app.get('/ping', function (req, res) { // this one works
     return res.send('pong');
    });

//    app.get('', function (req, res) { // doesn't work
//    app.get('*', function (req, res) { // doesn't work
//    app.get('.', function (req, res) { // doesn't work
//    app.get('.*', function (req, res) { // doesn't work
//    app.get('./', function (req, res) { // doesn't work
    app.get('./*', function (req, res) { // doesn't work
      console.log('hey') // never seen
      res.sendFile(path.join(__dirname, 'client/src', 'index.html'));
    });

    app.get('/test', function (req, res) { // this one works
      console.log('hey2') // I do see this when calling localhost:3000/test
      res.sendFile(path.join(__dirname, 'client/src', 'index.html'));
    });

    app.listen(process.env.PORT || 8080);

package.json (/)

{
  "name": "ouyea",
  "version": "0.1.1",
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://xxxx"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://xxxx"
  },
  "homepage": "https://xxxx",
  "dependencies": {
    "express": "^4.16.4"
  }
}

package.json (/client)

    {
      "name": "client",
      "version": "0.1.1",
      "private": true,
      "dependencies": {
        "axios": "^0.18.0",
        "googleapis": "^33.0.0",
        "papaparse": "4.6.0",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-scripts": "1.1.4",
        "semantic-ui-css": "^2.4.0",
        "semantic-ui-react": "^0.82.5"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      },
      "proxy": {
        "": { // I know comments don't work, but I put them here for clarity, none of them worked
//        "*": {
//        ".": {
//        "/": {
          "target": "http://localhost:8080"
        },
        "/test": {
          "target": "http://localhost:8080"
        }
      }
    }

【问题讨论】：

不清楚您要做什么。 localhost:3000 是您的开发反应应用程序（可能正在运行热模块重新加载）？关键是您使用 8080 代理来访问 express 应用程序中的端点，例如 localhost:3000/api 以获取数据。
啊……我明白了……所以 express 不是管理应用程序，只是管理需要在后端的服务的服务器。我说得对吗？那么谁在管理应用程序？
是的，为了您的目的。有些应用程序是使用 Express/Koa 等在服务器上呈现的 React 页面，并且使用 React 客户端（通用/同构应用程序），但这不是您在这里所做的。
您能写下与答案相同的内容，以便我关闭它吗？否则我可以放弃这个问题，但是......好吧，这听起来可能很愚蠢，但我被困在这里:_)

标签： javascript node.js reactjs express

【解决方案1】：

express 服务器的目的是简单地 a) 从您的 dist 文件夹中呈现基本 HTML 页面，并且 b) 从您在 Express 中设置为路由的端点提供数据，这些数据可以由您的 React 客户端应用程序访问.有一些应用程序（通用）可以从 Express 呈现 React 页面，但这不是你在这里使用 create-react-app 所做的。

【讨论】：