当前位置: 首页 > 知识库问答 >
问题:

Azure上的React Express:无效的主机报头

寇夜洛
2023-03-14

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

这个很好。

我有两个Docker容器:clientReact应用程序和server承载我的API的Express应用程序。我正在使用代理在服务器上托管API。

客户端的包中。我已经定义了:

"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容器注册表中。它们似乎从日志中加载得很好。

在我的应用程序服务中

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

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

网站\u端口为3000。

这导致我的网站上的错误"无效的主机头"

•从服务器中的静态文件夹为应用程序提供服务。这是因为它服务于应用程序,但它会弄乱我的身份验证。我需要能够从客户端的应用程序提供静态部分。js和我的ExpressAPI进行数据库调用和身份验证。

•在我的docker compose文件中,将前端绑定到:

ports:
 - 3000:80

此外,我认为这与客户端包中的代理有关。基于此repo的json

任何帮助都将不胜感激!

这是代理设置。

这多少解决了它。通过删除代理:http://localhost:3001我可以加载网站,但问题中的建议答案不适合我。我现在无法访问我的API。


共有2个答案

傅志文
2023-03-14

因此,我最终不得不离开容器,在更典型的MERN架构中为React应用提供服务,快速服务器从静态构建文件夹托管React应用。我用PassportJS设置了一些路由来处理我的身份验证。

不是我喜欢的解决方案,我更喜欢使用容器,但这是可行的。希望这能为人们指明正确的方向!

邹阳
2023-03-14

以前从未使用过azure,我也不使用代理(由于其随机连接问题),但如果您的应用程序基本上运行express,则可以使用cors。(作为旁注,在5000上运行express server比在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',
  }
};

然后,根据环境的不同,我可以在定义express中间件的地方实现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/--单击此处查看我如何为我的网站实现它),并且门户env必须与主机名http://example.com。在运行多个环境时,此设置是灵活且必要的。

或者,如果您正在使用create react应用程序,则只需弹出应用程序并在webpack生产配置中实现代理即可。

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

 类似资料:
  • 我在Angular v4中有一个应用程序,它必须改变访问的url依赖的scss。例如:如果浏览器中的链接是“example.com”,那么应用程序具有背景色:黑色如果链接是“example2.com”,那么背景色:红色 我有下一个问题: 当我转到C:\Windows\System32\drivers\etc中的主机并在hosts 127.0中设置下一个配置时。0.1示例。com 127.0。0.1

  • 我正在使用webacks-dev-server进行热重载。但是在我的控制台中,它一直说 我在webpad配置中的设置如下: 我如何解决这个问题,以便它能在我的开发环境中工作?我很乐意听到这个消息,因为目前我必须不断刷新页面。

  • 我正在进入Spring Cloud 2020.0.0的世界。 我有一个配置服务器、网关服务器、eureka服务器和第一个微服务设置,并部署在一个开发环境中,它们都可以彼此对话。它们都是先配置的,并且都成功地从配置服务器下拉属性源,然后向eureka服务器注册。因为我至少现在没有为我的服务应用程序设置DNS,所以我有。

  • 我有一个RMI服务器在本地主机上运行,导出类型的对象: 然后我想启动一个客户端并获取该对象的存根。似乎找到了注册表,但随后在块中抛出了: java.rmi.NotBoundexception:M在sun.rmi.registry.registryimpl.lookup(registryimpl.java:136)在sun.rmi.server.unicastserverref.olddispatc

  • 似乎所有附带nServicebus的示例项目都设置为发送者和宿主是Web角色和辅助角色(并通过角色切入点托管)。 我需要这样做: Web角色发送消息- 是否可以将本地主机配置为仅使用Azure队列存储(而不是MSMQ)? 我似乎在任何地方都找不到一个记录在案的例子。

  • 问题内容: 我正在尝试使用PyMySQL连接到本地主机上的MySQL: 但是(在Python 2.7和Python 3.2上)我得到了错误: socket.error:[Errno 111]连接被拒绝 pymysql.err.OperationalError:(2003年,“无法连接到’localhost’(111)上的MySQL服务器”) 我确定mysqld正在运行,因为我可以使用command