Overview
I have a frontend using Vue and a backend using FastAPI.
I have made Docker containers of both and a docker-compose.yml to hook it all together. It all works fine locally when I am developing.
When I move it to Azure, I am receiving a CORS error, specifically Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://<my-site>.azurewebsites.net:8080/login.
I have looked at several CORS questions (here is another) and Azure multi-container tutorials (another one, yet another and one last one). None of the suggestions solved the problem, but none of them were my exact situation:
- Azure Web App
- Using Multi-Container
- With a separate front end (Vue) and back end (FastAPI)
Code
Here are the relevant parts of my code:
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:
Front End 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;"]
Front End Axios Code
import axios from "axios";
export default () => {
return axios.create({
baseURL: `https://<my-site>.azurewebsites.net:8080/`,
headers: { "Access-Control-Allow-Origin": "*" },
});
};
Back End 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
Back End FastAPI Code
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
I know much of that is too loose... I will fix it once I can get anything to work.
Azure Commands
First, I read that only ports 80 and 8080 are recognized, so I put my FE on 80 and my BE on 8080.
Next, these are the relevant Azure commands, once I pushed the containers up:
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>
The docker-compose.yml mentioned above is the same one that is shown earlier.
I am able to see all of the front end fine, but any time the front-end tries to reach the back end, it hangs for a while and then comes back with the Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://<my-site>.azurewebsites.net:8080 error.
I am also unable to hit the back end directly, either just to see the raw API, or using FastAPI's auto-generated docs page.
