Azure 上的 React + Express：无效的主机标头

错误

当部署到具有多容器支持的 Azure Web Apps 时，我收到“无效的主机标头”消息来自https://mysite.azurewebsites.com https://mysite.azurewebsites.com

本地设置

这运行良好。

我有两个 Docker 容器：client一个 React 应用程序和server托管我的 API 的 Express 应用程序。我正在使用代理来托管我的 APIserver.

In client的 package.json 我已经定义了：

"proxy": "http://localhost:3001"

我使用以下 docker compose 文件在本地构建。

version: '2.1'

services:
  server:
    build: ./server
    expose:
      - ${APP_SERVER_PORT}
    environment:
      API_HOST: ${API_HOST}
      APP_SERVER_PORT: ${APP_SERVER_PORT}
    ports: 
      - ${APP_SERVER_PORT}:${APP_SERVER_PORT}
    volumes: 
      - ./server/src:/app/project-server/src
    command: npm start

  client: 
    build: ./client
    environment: 
      - REACT_APP_PORT=${REACT_APP_PORT}
    expose:
      - ${REACT_APP_PORT}
    ports:
      - ${REACT_APP_PORT}:${REACT_APP_PORT}
    volumes:
      - ./client/src:/app/project-client/src
      - ./client/public:/app/project-client/public
    links:
      - server
    command: npm start

一切都运行良好。

On Azure

部署到 Azure 时，我有以下内容。client and server图像已存储在 Azure 容器注册表中。它们似乎从日志中加载得很好。

在我的“应用服务”>“容器设置”中，我从 Azure 容器注册表 (ACR) 加载图像，并使用以下配置（Docker compose）文件。

version: '2.1'

services:
  client: 
    image: <clientimage>.azurecr.io/clientimage:v1
    build: ./client
    expose:
      - 3000
    ports:
      - 3000:3000
    command: npm start

  server:
    image: <serverimage>.azurecr.io/<serverimage>:v1
    build: ./server
    expose:
      - 3001
    ports: 
      - 3001:3001
    command: npm start

我还在应用程序设置中定义了：

WEBSITES_PORT为 3000。

这会导致我的网站出现错误“无效的主机标头”

我尝试过的事情

• 从以下位置提供应用程序static文件夹中server。这是有效的，因为它为应用程序提供服务，但它搞乱了我的身份验证。我需要能够提供静态部分client的 App.js 并与我的 Express API 进行数据库调用和身份验证对话。

• 在我的 docker-compose 文件中，将前端绑定到：

ports:
 - 3000:80

• 其他一些端口组合，但没有成功。

另外，我认为这与proxy in client的 package.json 基于这个仓库 https://github.com/LucMurakami/myWebsite#invalid-host-header-errors-after-configuring-proxy

任何帮助将不胜感激！

Update

这是代理设置。

This https://stackoverflow.com/questions/52845805/deploying-create-react-app-to-heroku-with-express-backend-returns-invalid-host-h某种程度上解决了它。通过删除"proxy": "http://localhost:3001"我可以加载该网站，但问题中建议的答案对我不起作用。即我现在无法访问我的 API。

没用过azure之前我也不使用代理（由于其随机连接问题 https://stackoverflow.com/questions/52483349/econnrefused-error-for-create-react-app-and-node-server），但是如果你的应用程序基本上正在运行express，你可以利用cors https://github.com/expressjs/cors。 （顺便说一下，更常见的做法是在 Express 服务器上运行5000 than 3001.)

我首先设置了一个环境/config.js文件夹和文件如下：

module.exports = {
  development: {
    database: 'mongodb://localhost/boilerplate-dev-db',
    port: 5000,
    portal: 'http://localhost:3000',
  },
  production: {
    database: 'mongodb://localhost/boilerplate-prod-db',
    port: 5000,
    portal: 'http://example.com',
  },
  staging: {
    database: 'mongodb://localhost/boilerplate-staging-db',
    port: 5000,
    portal: 'http://localhost:3000',
  }
};

然后，根据环境，我可以实施cors我在其中定义快速中间件：

const cors = require('cors');
const config = require('./path/to/env/config.js');
const env = process.env.NODE_ENV;

app.use(
    cors({
      credentials: true,
      origin: config[env].portal,
    }),
  );

请注意门户网站和AJAX请求必须具有匹配的主机名。例如，如果我的应用程序托管在http://example.com，我的前端 API 请求必须向http://example.com/api/ (not http://localhost:3000/api/ -- 点击这里 https://github.com/mattcarlotta/Matts-Universe/blob/development/client/src/actions/axiosConfig.js看看我如何在我的网站上实现它），以及portalenv 必须与主机名匹配http://example.com。在运行多个环境时，这种设置是灵活且必要的。

或者如果您正在使用create-react-app，然后只需弹出您的应用程序并实施proxy https://webpack.js.org/configuration/dev-server/#devserver-proxy在 - 的里面webpack生产配置。

或者将您的应用程序迁移到我的全栈样板 https://github.com/mattcarlotta/Webpack-React-Boilerplate/tree/fullstack，它实现了cors上面的例子。