【发布时间】：2020-12-31 02:31:20
【问题描述】：
概述
我有一个使用 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 网络应用程序
- 使用多容器
- 具有单独的前端 (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 命令，一旦我将容器向上推：
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>az webapp config appsettings set -g <my-rg> -n <my-app> --settings WEBSITES_PORT=80az role assignment create --assignee <my-info> --scope /subscriptions/<my-subscription>/resourceGroups/<my-rg>/providers/Microsoft.ContainerRegistry/registries/<my-acr> --role "AcrPull"az webapp cors add -g <my-rg> -n <app-name> --allowed-origins "*"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.ioaz 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 页面。
【问题讨论】：
-
所有请求（GET/POST/PUT 等...）都有同样的问题吗？您能否打开浏览器控制台，然后为一个因 CORS 失败的 http 请求添加
request和response的原始标头。 -
确保对 OAuth 登录端点使用浏览器导航，而不是通过 axios 发出 XHR 请求，这是陷阱之一。
-
@DipenShah 你能解释一下你的意思吗？我不确定“OAuth 的浏览器导航”是什么意思？我会用什么来代替 axios？
-
如果您无法访问 swagger 文档 - 这可能意味着您的 FastAPI 容器根本没有启动。您可以检查日志或以其他方式验证容器是否运行？
-
@MikeWilliamson 我的意思是确保您没有从 Axiom 调用
/login端点，而是使用a标签或window.location将用户重定向到/login端点。跨度>
标签： azure vue.js web-services docker-compose fastapi