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

Question

误差

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

局部设置

这个没问题。

我有两个Docker容器：client是React应用程序，server是承载我API的快捷应用程序。我正在使用一个代理在server上托管我的API。

在client的package.json中，我定义了：

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

我使用下面的docker组合文件在本地构建。

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时，我有以下内容。client和server图像存储在中。从原木上看，它们似乎装载得很好。

在我的Azure > Container中，我从(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文件夹server中为应用程序提供服务。这是因为它为应用程序提供服务，但它破坏了我的身份验证。我需要能够为client的App.js中的静态部分提供服务，并与我的快捷API进行数据库调用和身份验证。

·在我的docker中-编写文件，将前端绑定到：

ports:
 - 3000:80

·其他几个港口组合，但没有运气。

另外，我认为这与基于proxy的client's package.json中的这个回购有关。

任何帮助都将不胜感激！

更新

这是代理设置。

这在一定程度上解决了它。通过删除"proxy": "http://localhost:3001"，我可以加载网站，但问题的建议答案并不适用于我。也就是说，我现在无法访问我的API。

Answer 1

以前从未使用过azure，我也不使用代理(由于它的随机连接问题)，但是如果您的应用程序基本上正在运行express，则可以使用cors。(顺便提一句，在5000上运行快递服务器比在3001上运行更常见。)

我首先设置了一个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请求必须有匹配的主机名。例如，如果我的应用程序托管在http://example.com上，我的前端API请求必须向http://example.com/api/ (而不是http://localhost:3000/api/ -- 单击此处 )发出请求，以查看如何为我的网站实现它，而portal env必须与主机名http://example.com相匹配。这种设置在运行多个环境时是灵活和必要的。

或者，如果您正在使用create-react-app，那么只需弹出您的应用程序并在webpack产品配置中实现一个代理。

或者将您的应用程序迁移到我的全叠样板，它实现了上面的cors示例。

Answer 2

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

不是我喜欢的解决方案，我更愿意使用容器，但这是可行的。希望这能指向正确的方向！