Azure Web App 多容器，无论设置如何都会遇到 CORS

Question

概述

我有一个使用 Vue 的前端和一个使用 FastAPI 的后端。

我已经制作了两者的 Docker 容器和 docker-compose.yml将它们连接在一起。当我开发时，一切都在本地运行良好。

当我将其移至 Azure 时，我收到 CORS 错误，特别是 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://<my-site>.azurewebsites.net:8080/login .

我看过几个CORS questions ( here is another ) 和 Azure multi-container tutorials ( another one 、 yet another 和 one last one )。这些建议都没有解决问题，但都不是我的具体情况:

• Azure Web 应用
• 使用多容器
• 具有独立的前端 (Vue) 和后端 (FastAPI)

代码

以下是我的代码的相关部分:

docker-compose.yml

version: "3.8"
services:
  frontend:
    image: <my-acr>.azurecr.io/<my-fe-image>:1
    networks:
      - fullstack
    ports:
      - "80:80"
  backend:
    image: <my-acr>.azurecr.io/<my-be-image>:1
    networks:
      - fullstack
    ports:
      - "8080:80"
networks:
  fullstack:

前端 Dockerfile

# develop stage
FROM node:14.8-alpine3.12 as develop-stage

ENV CONTAINER_PATH /vue

WORKDIR $CONTAINER_PATH

COPY package*.json ./

RUN yarn install

COPY . .

# build stage
FROM develop-stage as build-stage
RUN ["yarn", "build"]

# production stage
FROM nginx:1.19.2-alpine as production-stage
COPY --from=build-stage /vue/dist /usr/share/nginx/html
EXPOSE 8080 2222 80 443
CMD ["nginx", "-g", "daemon off;"]

前端axios代码

import axios from "axios";

export default () => {
  return axios.create({
    baseURL: `https://<my-site>.azurewebsites.net:8080/`,
    headers: { "Access-Control-Allow-Origin": "*" },
  });
};

后端 Dockerfile

FROM tiangolo/uvicorn-gunicorn:python3.8

RUN ["pip", "install", "--upgrade", "pip"]

RUN ["pip", "install", "--upgrade", "--ignore-installed", \
    "--use-feature=2020-resolver", "--no-cache-dir", "jwcrypto", "fastapi", "passlib", \
    "sqlalchemy", "toml", "topicaxis-opengraph", "sqlalchemy_imageattach", \
    "email_validator", "bcrypt"]

EXPOSE 8080 2222 80 443

COPY ./src /app

后端FastAPI代码

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

我知道其中大部分都太松散了...一旦我可以让任何东西工作，我就会修复它。

<小时/>

Azure 命令

首先，我read that仅识别端口 80 和 8080，因此我将 FE 放在 80 上，将 BE 放在 8080 上。

接下来，当我推送容器后，这些是相关的 Azure 命令:

1. az webapp create -g <my-rg> -p <my-plan> -n <app-name> --multicontainer-config-file ./docker-compose.yml --multicontainer-config-type COMPOSE --assign-identity /subscriptions/<my-subscription/resourceGroups/<my-rg>/providers/Microsoft.ManagedIdentity/userAssignedIdentities/<my-userid>
2. az webapp config appsettings set -g <my-rg> -n <my-app> --settings WEBSITES_PORT=80
3. az role assignment create --assignee <my-info> --scope /subscriptions/<my-subscription>/resourceGroups/<my-rg>/providers/Microsoft.ContainerRegistry/registries/<my-acr> --role "AcrPull"
4. az webapp cors add -g <my-rg> -n <app-name> --allowed-origins "*"
5. az webapp config container set -n <app-name> -g <my-rg> --multicontainer-config-file ./docker-compose.yml --multicontainer-config-type COMPOSE --docker-registry-server-url https://<my-site>.azurecr.io
6. az webapp restart -n <app-name> -g <my-rg>

docker-compose.yml上面提到的与之前显示的相同。

<小时/>

我可以很好地看到所有前端，但是每当前端尝试到达后端时，它都会挂起一段时间，然后返回 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://<my-site>.azurewebsites.net:8080错误。

我也无法直接访问后端，要么只是为了查看原始 API，要么使用 FastAPI 自动生成的 docs页。

Answer 1

我必须承认，我从未在具有前端和后端的应用服务中运行过多容器部署，仅运行过独立应用程序或单个容器应用程序。话虽如此...

我认为这里存在几个问题。

首先是为什么您无法从外部连接到后端服务。

如果您使用的是基于 Linux 的 Azure 应用服务，根据 Azure documentation ，在多容器部署中，只有一个容器开放以通过 Internet 访问。哪一个？规则如下:

Here are the rules for determining which container is accessible - in the order of precedence:

• 应用设置 WEBSITES_WEB_CONTAINER_NAME 设置为容器名称
• 第一个定义端口 80 或 8080 的容器
• 如果以上都不成立，则文件中定义的第一个容器将可访问(公开)

(抱歉，我无法正确设置列表格式)。

这可能是无法从外部访问后端容器的原因，并且，如果两个容器都应该从互联网访问，那么这将是更改两个容器的部署的一个很好的理由改为单容器。

另一个问题是为什么您会收到 CORS 错误。

有多种原因可能会导致该问题。

一方面，只要您的前端不需要以这种方式使用，就没有必要为您的网络应用配置 CORS。所以这个配置不是必须的:

az webapp cors add -g <my-rg> -n <app-name> --allowed-origins "*"

出于同样的原因，您不需要在 Axios 中配置 CORS，因此您可以安全地从代码中删除以下配置行:

headers: { "Access-Control-Allow-Origin": "*" },

还有一个问题:如何从前端联系您的后端服务？

首先，您的 FastAPI 配置看起来是正确的。

正如我的评论中所建议的，我最好的建议是配置 Axios 客户端以利用 docker 内部网络，并将 Axios 配置为使用后端作为向其发送请求的主机。

如果您查看您指出的第一个多容器示例 ( https://learn.microsoft.com/en-us/azure/app-service/tutorial-multi-container-app )，当他们配置 Wordpress 容器时，他们会在其配置属性中引用 db 作为主机名，即db 公开的服务:

WORDPRESS_DB_HOST: db:3306

简而言之，我认为多容器设置最适合当您拥有一项服务以及该服务正常运行所需的多个资源(SQL 数据库、Kafka、Redis)时的用例。

如果您不需要从外部访问后端，而只需通过前端访问，那么它也可能是合适的。

在任何其他情况下，具有两个单容器 Web 应用程序的部署应该更合适。

最后一个想法...如果您一定需要实现多容器解决方案，也许您可​​以包含某种网络服务器，例如 nginx，反向代理的想法，正如 @timur 的评论中所建议的那样，您可以公开它在80端口，定义访问前后端服务的规则。它应该经过测试，但这可以帮助您大大简化 CORS 设置，甚至避免使用它。