Azure上的React + Express：无效的主机头 [英] React + Express on Azure: Invalid Host Header

问题描述

当部署到具有多容器支持的Azure Web Apps时，我收到一条无效的主机头 消息， a href = https://mysite.azurewebsites.com rel = nofollow noreferrer> https://mysite.azurewebsites.com

When deploying to Azure Web Apps with Multi-container support, I receive an "Invalid Host Header" message from https://mysite.azurewebsites.com

运行正常。

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

I have two Docker containers: client a React app and server an Express app hosting my API. I am using a proxy to host my API on server.

在客户端的package.json中，我定义了：

In client's package.json I have defined:

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

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

I use the following docker compose file to build locally.

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容器注册表中。它们似乎可以从日志中正常加载。

When deploying to Azure I have the following. client and server images have been stored in Azure Container Registry. They appear to load just fine from the logs.

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

In my App Service > Container Settings I am loading the images from Azure Container Registry (ACR) and I'm using the following configuration (Docker compose) file.

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

我还在应用程序设置中定义了以下内容：

I have also defined in Application Settings:

WEBSITES_PORT 为3000。

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

This results in the error on my site "Invalid Host Header"

•从静态服务器中的c $ c>文件夹。这样可以为应用程序提供服务，但是却弄乱了我的身份验证。我需要能够从 client 的App.js提供静态部分，并与Express API进行通话以进行数据库调用和身份验证。

• Serving the app from the static folder in server. This works in that it serves the app, but it messes up my authentication. I need to be able to serve the static portion from client's App.js and have that talk to my Express API for database calls and authentication.

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

• In my docker-compose file binding the front end to:

ports:
 - 3000:80

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

• A few other port combinations but no luck.

此外，我认为这与客户端中的代理有关的package.json基于此存储库

Also, I think this has something to do with the proxy in client's package.json based on this repo

任何帮助将不胜感激！

这是代理设置。

这在某种程度上解决了它。通过删除 proxy： http：// localhost：3001 ，我可以加载网站，但是问题中建议的答案对我不起作用。即我现在无法访问我的API。

This somewhat solves it. By removing "proxy": "http://localhost:3001" I am able to load the website, but the suggested answer in the problem does not work for me. i.e. I am now unable to access my API.

推荐答案

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

So, I ended up having to move off of containers and serve the React app up in more of a typical MERN architecture with the Express server hosting the React app from the static build folder. I set up some routes with PassportJS to handle my authentication.

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

Not my preferred solution, I would have preferred to use containers, but this works. Hope this points someone out there in the right direction!

这篇关于Azure上的React + Express：无效的主机头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！