使用express后端将create-react-app部署到heroku会在浏览器中返回无效的主机头 [英] deploying create-react-app to heroku with express backend returns invalid host header in browser

问题描述

标题说明了一切。我在这里构建了一个最小的工作示例： https://github.com/sehailey/proxytest

The title says it all. I've built a minimal working example here: https://github.com/sehailey/proxytest

我已经尝试过，所以可能我丢失的东西计数了（尽管它们存储在提交中）。我保证一旦得到答案，就可以跟进数十个回答该问题的线程。

I've tried so may things I've lost count (though they're stored in the commits). I promise once I get an answer to follow up on the dozens of answered threads asking this question.

推荐答案

它们似乎改变了 create-react-app 的使用方式代理。从 package.json 中删除​​ proxy 。然后...

Looks like they changed how the create-react-app utilizes a proxy. Remove the proxy from the package.json. Then...

添加此软件包：

npm i -S http-代理中间件

然后在 setupProxy.js > src ：

Then create a setupProxy.js in src:

src / setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = app => {
  app.use(proxy("/api/*", { target: "http://localhost:5000/" }));
};

现在从React组件内部，您可以执行以下操作：

Now from inside the React component, you can do this:

src / App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

export default class App extends Component {
  state = {
    message: "",
    error: "",
    eee: "",
    text: ""
  };

  componentDidMount = () => this.fetchAPIMessage();

  fetchAPIMessage = async () => {
    try {
      const res = await fetch(`/api/message`);
      const { message } = await res.json();
      this.setState({ message });
    } catch (err) {
      console.error(err);
    }
  };

  render = () => (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>WELCOME CREATE REACT APP!</p>
        <div className="App-link">{this.state.message}</div>
      </header>
    </div>
  );
}

index.js （我添加了 npm i -D morgan 这是一个方便的日志记录框架-当请求到达API时，它将在控制台中显示它。）

index.js (I added npm i -D morgan which is a handy logging framework -- when a request hits the API, it displays it in the console).

const path = require("path");
const express = require("express");
const app = express();
const morgan = require("morgan");

app.use(morgan("tiny")); // logging framework

// Serve our api message
app.get("/api/message", async (req, res, next) => {
  try {
    res.status(201).json({ message: "HELLOOOOO FROM EXPRESS" });
  } catch (err) {
    next(err);
  }
});

if (process.env.NODE_ENV === "production") {
  // Express will serve up production assets
  app.use(express.static("build"));

  // Express will serve up the front-end index.html file if it doesn't recognize the route
  app.get("*", (req, res) =>
    res.sendFile(path.resolve("build", "index.html"))
  );
}

// Choose the port and start the server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Mixing it up on port ${PORT}`));

package.json （使用 node 服务于生产资产-参见开始脚本）

package.json (use node to serve production assets -- see "start" script)

{
  "name": "proxytest",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://proxytest2.herokuapp.com/",
  "dependencies": {
    "concurrently": "^4.0.1",
    "express": "^4.16.4",
    "http-proxy-middleware": "^0.19.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.5",
    "serve": "^10.0.2"
  },
  "scripts": {
    "start": "NODE_ENV=production node index.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "client": "react-scripts start",
    "server": "nodemon server",
    "eject": "react-scripts eject",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "npm run build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

在生产中运行时会在控制台中看到的内容：

m6d@m6d-pc:~/Desktop/proxytest-master$ npm start

> proxytest@0.1.0 start /home/m6d/Desktop/proxytest-master
> NODE_ENV=production node index.js

Mixing it up on port 5000
GET / 200 2057 - 6.339 ms
GET /static/css/main.068b9d02.chunk.css 304 - - 1.790 ms
GET /static/js/1.9a879072.chunk.js 304 - - 0.576 ms
GET /static/js/main.e3ba6603.chunk.js 304 - - 0.605 ms
GET /api/message 201 36 - 4.299 ms
GET /static/media/logo.5d5d9eef.svg 304 - - 0.358 ms

其他说明：

• 请确保将您的客户端src与API分开（例如，从前端React应用程序到具有自己依赖项的 client 文件夹中的所有内容）。


• 从API的 package.json

• Make sure to separate your client src from the API (for example, put everything from the front-end React application into a client folder with its own dependencies).
• Remove any and all React dependencies from your API's package.json

这篇关于使用express后端将create-react-app部署到heroku会在浏览器中返回无效的主机头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！