Docker化Symfony+Vue项目出现CORS/NS_ERROR_DOM_BAD_URI错误求助

核心问题定位 #

1. 跨域(CORS)错误：前端直接请求后端容器端口，而非通过Nginx反向代理的同域名路径，触发跨域；同时CORS配置未完全适配Docker环境下的访问场景。
2. NS_ERROR_DOM_BAD_URI错误：Docker配置中的路径挂载错误、Nginx反向代理配置逻辑问题，导致请求路径无效。
3. PHP-FPM端口误解：后端Dockerfile暴露7999端口，但PHP-FPM默认监听9000端口，Nginx无法正确转发请求至后端。

分步修复 #

1. 修正docker-compose.yml配置 #

version: '3.8'

x-common-variables: &common-variables
  MYSQL_DATABASE: $MYSQL_DATABASE
  MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD

services:
  db:
    image: mysql
    restart: always
    cap_add:
      - SYS_NICE
    volumes:
      - mysql_data:/var/lib/mysql
      - ./server/db-setup.sql:/docker-entrypoint-initdb.d/setup.sql
    container_name: database
    ports:
      - "$DB_PORT:3306"
    environment:
      <<: *common-variables
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD
      MYSQL_HOST: $MYSQL_HOST

  #Nginx Service
  nginx:
    depends_on:
      - backend
      - frontend
    restart: always
    build:
      context: ./nginx
      dockerfile: Dockerfile
    container_name: nginx
    ports:
      - "8080:80"

  #PHP Service
  backend:
    build:
      context: ./server
      dockerfile: Dockerfile
    depends_on:
      - db
    container_name: backend
    environment:
      <<: *common-variables
      SERVICE_NAME: backend
      PORT: $API_PORT
    volumes:
      - ./server:/var/www/html  # 修正挂载路径为项目相对路径
      - /var/www/html/vendor

  frontend:
    stdin_open: true
    container_name: frontend
    build:
      context: ./client  # 修正build上下文为项目相对路径
      dockerfile: Dockerfile
    volumes:
      - /app/node_modules
      - ./client:/app  # 修正挂载路径对应容器内工作目录
    # 前端通过Nginx反向代理访问，无需暴露端口给主机
    # ports:
    #   - $CLIENT_PORT:$CLIENT_PORT

  adminer:
    image: adminer:latest
    restart: unless-stopped
    container_name: database-view
    ports:
      - $ADMINER_PORT:8080
    depends_on:
      - db
    environment:
      ADMINER_DEFAULT_SERVER: db

volumes:
  mysql_data:

2. 修正Nginx服务的default.conf配置 #

upstream frontend {
  server frontend:3000;
}

# 启用后端upstream，指向PHP-FPM默认监听端口9000
upstream backend {
  server backend:9000;
}

server {
  listen 80;
  index index.php index.html;
  error_log  /var/log/nginx/error.log;
  access_log /var/log/nginx/access.log;
  root /var/www/html/public;

  location / {
    proxy_pass http://frontend;
    # 添加代理头，避免前端路由解析异常
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  location /api {
    try_files $uri $uri/ /index.php?$query_string;
    gzip_static on;
  }

  # Nginx转发请求至PHP-FPM
  location ~ \.php$ {
    try_files $uri =404;  # 恢复无效请求拦截规则
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass backend;  # 使用容器名而非localhost，适配Docker网络
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}

3. 优化后端CORS配置（可选） #

若前端通过Nginx的/api路径请求后端，此时前端与API同属localhost:8080域名，不会触发跨域，可保留现有CORS配置；若需允许其他域名访问，确保.env规则覆盖Docker场景：

###> nelmio/cors-bundle ###
CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
###< nelmio/cors-bundle ###

4. 修正前端API请求路径 #

将前端API的baseURL改为相对路径/api，避免直接请求后端容器端口，示例Vue项目axios配置：

import axios from 'axios';

const api = axios.create({
  baseURL: '/api', // 由Nginx转发至后端
  timeout: 5000,
});

5. 自定义PHP-FPM端口（可选） #

若需将PHP-FPM监听端口改为7999，在后端Dockerfile中添加配置：

# 在CMD指令前添加
RUN echo "listen = 7999" >> /usr/local/etc/php-fpm.d/www.conf

同时修改Nginx的upstream配置为server backend:7999;

测试验证 #

1. 清理旧容器与数据卷：docker-compose down -v
2. 重新构建并启动服务：docker-compose up --build
3. 访问localhost:8080，测试前端页面与API请求是否正常

内容的提问来源于stack exchange，提问作者alesssz