Question

我正在使用 create-react-app，但在 react build 中遇到了一些问题。我没有将客户端和服务器端集成在一起，因为这可能会给客户端路由带来麻烦。

问题：我已经开始使用 heroku、git、netlify、firebase 部署我的 react 构建。是的，我可以像使用 npm start 一样看到确切的页面。但是，我无法从服务器获取数据，它给了我来自服务器的奇怪响应：You need to enable JavaScript to run this app. 即使状态代码是 200，我也没有按预期收到任何数据。

Text

此外，console.log 显示此错误：

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Text

我怀疑问题出在 javascript 文件夹到 index.html 的连接上，因为我在我的 index.html 中看到了这行代码：

<noscript>You need to enable JavaScript to run this app.</noscript>

我没有关闭 javascript，我已经确保它已打开。
我已经成功地使用 Heroku 部署了我的服务器文件夹，并且它在我的本地客户端 (npm start) 上运行良好，但它不适用于 built 文件夹
如果我使用 npm start 运行服务器，它可以正常工作，我的 built 文件夹中一定有问题。我在运行 build 后没有修改 npm run build 的路径，testing-create-react-app 是我的客户端文件夹：

Text

所以我决定创建另一个 create-react-app 来检查它是否产生相同的错误。我遵循 create-react-app 文档中的指南：

npm install -g serve
serve -s build

但是我还是遇到了同样的问题。所以在这里我将在这里展示我的代码：

1. App.js
2. server.js
3. package.json

// 1. App.js

function App() {

  const [message, setMessage] = useState("")

  // fetching data from server
  useEffect( () => {

      fetch('/tester')
      .then(res => res.json())
      .then(data => setMessage(data.message))
      .catch(err => console.log(err))
  }, [])


  
  return (
    <div className="App">

        <h1>why my build is not working</h1>
        {
          message
          ?
          message
          :
          <h1>no message</h1>
        }
    </div>
  );
}

// 2. server.js
const express = require("express");
const app = express();

// express middleware
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.get("/tester", (req, res, next) => {
    try {
        res.status(200).json({
            message: "lol"
        })
    } catch (err) {
        console.log(err)
    }
})



const PORT = process.env.PORT || 5000;
const server = app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

// handle error
process.on("unhandledRejection", (err, promise) => {
    console.log(`Logged Error: ${err}` )
    server.close(() => process.exit(1))
})

// 3. package.json
{
  "name": "testing-create-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:5000",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "express": "^4.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

编辑***

我的 server.js 位于：

Text

沙盒链接：https://codesandbox.io/s/p424l?file=/api/server.js

感谢有人能帮我解决这个问题

在本地部署和服务 React 应用程序构建后，服务器端无法正常工作

0 个答案: