Question

尝试使用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（/客户端）

    {
      "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"
        }
      }
    }

Answer 1

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

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

1 个答案: