CORS 在 dockerized Django REST + Angular 项目中被阻止

Posted 2023-03-03

【中文标题】CORS 在 dockerized Django REST + Angular 项目中被阻止

【英文标题】：CORS blocked in dockerized Django REST + Angular project

【发布时间】：2019-04-23 11:50:33

【问题描述】：

我决定今天将现有的 Django REST + Angular 应用程序化。网站正常显示，但 CORS 请求被阻止。

从源“http://localhost:3000”访问“http://localhost:8000/branches/1”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

Angular 应用程序使用 nginx 进行 docker 化。我正在使用this 教程（docker + compose 文件在下面列出）。

奇怪的是，我之前遇到过这个问题，并通过使用 djang-cors-headers 包解决了这个问题。连同CORS_ORIGIN_ALLOW_ALL = True，这似乎不再能解决问题。

这是否与应用程序现在在容器中运行有关？我正在为项目提供 dockerfiles 以及下面的 docker-compose 文件。但不确定它们是否相关。

Angular 项目的 Dockerfile：

FROM tiangolo/node-frontend:10 as build-stage
WORKDIR /app

COPY package*.json /app/
RUN npm install

COPY ./ /app/
ARG configuration=production
RUN npm run build -- --output-path=./dist/out --configuration $configuration

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15
COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html

# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.confenter

Django REST 项目的 Dockerfile：

# Pull base image
FROM python:3.7

# Set environment varibles
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# create root directory
RUN mkdir /web

# set working directory
WORKDIR /web

# Coppy current directory contents into the container
ADD . /web/

# Install any needed packages in requirements.txt
RUN pip install -r requirements.txt

还有 docker-compose.yml 文件：

version: '3'

services:
  db:
    image: mysql:5.7
    restart: always
    container_name: db
    environment:
      - MYSQL_HOST=localhost
      - MYSQL_PORT=3306  # cannot change this port to other number
      - MYSQL_ROOT_HOST=%
      - MYSQL_DATABASE=test
      - MYSQL_USER=belter
      - MYSQL_PASSWORD=belter_2017
      - MYSQL_ROOT_PASSWORD=123456_abc
    ports:
      - '3302:3306'

  web:
    build: ./orca/
    restart: always
    command: bash -c "python manage.py makemigrations && python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
    container_name: web
    volumes:
      - ./orca:/code
    ports:
      - '8000:8000'
    depends_on:
      - db

  angular:
    build: ./ng-orca-new/
    container_name: angular
    ports:
      - '3000:80'

提前致谢！

【参考方案1】：

问题是由于 nginx 阻止了请求。在该层再次添加标头，产生以下 nginx.conf：

server 
  listen 80;
  location / 
    add_header "Access-Control-Allow-Origin" "*";
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin';

    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;