Question

错误

当部署到具有多容器支持的Azure Web Apps时，我收到来自https://mysite.azurewebsites.com

的“无效的主机标题” 消息

本地设置

运行正常。

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

在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

一切正常。

在Azure上

当部署到Azure时，我有以下内容。 client和server图像已存储在Azure容器注册表中。它们似乎可以从日志中正常加载。

在我的App Service>容器设置中，我正在从Azure容器注册表（ACR）加载图像，并且正在使用以下配置（Docker撰写）文件。

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的{{1}}文件夹提供应用程序。这可以为应用程序提供服务，但是却弄乱了我的身份验证。我需要能够提供server的App.js中的静态部分，并与我的Express API进行通话以进行数据库调用和身份验证。

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

client

•其他一些端口组合，但没有运气。

此外，我认为这与基于this repo的ports: - 3000:80的package.json中的proxy有关

任何帮助将不胜感激！

更新

这是代理设置。

This可以解决此问题。通过删除client，我可以加载网站，但是问题中建议的答案对我不起作用。即我现在无法访问我的API。

Answer 1

以前从未使用过Dim i As Long i = 4 Dim cell As Range For Each cell In Intersect(Columns(i), ActiveSheet.UsedRange) If Not cell.MergeCells Then cell.Interior.Color = vbGreen Next，而且由于它的random connection issues我也不使用代理，但是如果您的应用程序基本上在运行azure，则可以使用{{3 }}。（请注意，在express上运行Express服务器比5000更为常见。）

我首先像这样设置 env / 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上，那么我的前端API请求必须向http://example.com发出请求（不是http://example.com/api/-cors来查看我如何实现它用于我的网站），并且http://localhost:3000/api/的环境必须与主机名portal匹配。这种设置非常灵活，在运行多个环境时是必需的。

或者如果您使用的是http://example.com，则只需弹出您的应用并在create-react-app生产配置中实施一个click here。

或者将您的应用程序迁移到我的proxy，该应用程序实现了上面的webpack示例。

Answer 2

因此，我最终不得不离开容器，并在Express服务器中从静态build文件夹托管React应用程序，从而以更典型的MERN架构提供服务。我使用PassportJS设置了一些路由来处理身份验证。

不是我的首选解决方案，我本来希望使用容器，但这可以工作。希望这能指出正确的方向！

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

错误

本地设置

在Azure上

我尝试过的事情

更新

2 个答案: