使用express后端将create-react-app部署到heroku会在浏览器中返回无效的主机头

使用express后端将create-react-app部署到heroku会在浏览器中返回无效的主机头

看起来他们改变了

create-react-app

利用代理的方式。

proxy

从中删除

package.json

。然后…

添加此包：

npm i -S http-proxy-middleware

然后创建一个

setupProxy.js

在

src

：

src / setupProxy.js

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

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

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时，它将在控制台中显示它）。

const path = require("path");const express = require("express");const app = express();const morgan = require("morgan");app.use(morgan("tiny")); // logging framework// Serve our api messageapp.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 serverconst PORT = process.env.PORT || 5000;app.listen(PORT, () => console.log(`Mixing it up on port ${PORT}`));

package.json （用于

node

提供生产资产-请参见“开始”脚本）

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

在以下位置运行时，您将在控制台中看到的内容

production

：

m6d@m6d-pc:~/Desktop/proxytest-master$ npm start> [email protected] start /home/m6d/Desktop/proxytest-master> NODE_ENV=production node index.jsMixing it up on port 5000GET / 200 2057 - 6.339 msGET /static/css/main.068b9d02.chunk.css 304 - - 1.790 msGET /static/js/1.9a879072.chunk.js 304 - - 0.576 msGET /static/js/main.e3ba6603.chunk.js 304 - - 0.605 msGET /api/message 201 36 - 4.299 msGET /static/media/logo.5d5d9eef.svg 304 - - 0.358 ms

其他说明：

• 确保将您的客户端src与API分开（例如，将前端React应用程序中的所有内容放入

  client

  具有自己依赖项的文件夹中）。
• 从您的API中删除所有React依赖项

  package.json