VueJS,Symfony 6,Nginx和Docker CORS错误

j91ykkif  于 2023-11-17  发布在  Nginx
关注(0)|答案(1)|浏览(165)

我正在尝试将一个项目进行Dockerize,前端和后端是分开的:如果我用命令启动Symfony和VueJS来启动这两个项目(在同一个根目录下,但不同的文件夹中),它可以正常工作。但是如果我尝试将所有内容都进行Dockerize,我会得到CORS错误。
我正在使用:

  • 第一个月
  • Vue 3.2.13
  • PHP 8.1
  • Docker 4.24.2

在根项目中,我有几个文件和3个文件夹:客户端、服务器和nginx
这是来自服务器的Docker:

FROM php:8.1-fpm

# Copy composer.lock and composer.json into the working directory
COPY composer.lock composer.json /var/www/html/

# Set working directory
WORKDIR /var/www/html/

# Install dependencies for the operating system software
RUN apt-get update && apt-get install -y \
    build-essential \
    libpng-dev \
    zip \
    vim \
    git \
    curl

# Install extensions for php
RUN docker-php-ext-install pdo_mysql
RUN docker-php-ext-install gd

# Install composer (php package manager)
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Copy existing application directory contents to the working directory
COPY . /var/www/html

# Expose port 7999 and start php-fpm server (for FastCGI Process Manager)
EXPOSE 7999

CMD ["php-fpm"]

字符串
在.env文件中,我看到了下面一行:

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


和内部配置/包/nelmio_cors.yaml

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600
    paths:
        '^/': null


在客户端部分,我得到了Docker:

FROM node:16 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
EXPOSE 3000
RUN mkdir /app
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /app


和nginx.conf文件

server {
  listen 3000;

  location / {
    root /app;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}


在nginx文件夹中,我得到了两个文件:这是默认的.conf

upstream frontend {
  server frontend:3000;
}

#upstream backend {
  #server backend:7999;
#}

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;
  }

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

  # Nginx Pass requests to PHP-FPM
  location ~ \.php$ {
    #try_files $uri =404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    #fastcgi_pass backend;
    fastcgi_pass localhost:7999;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}


码头档案是

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf


最后,在根项目中,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
      dockerfile: Dockerfile
    volumes:
      - /app/node_modules
      - /client:/var/www/html/
    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:


我收到CORS错误或NS_ERROR_DOM_BAD_URI x1c 0d1x
有什么建议吗?

v6ylcynt

v6ylcynt1#

我的解决方法是在Server Dockerfile中不使用php:8.1-fpm,而是使用FROM php:8.1-apache

FROM php:8.1-apache

# Copy composer.lock and composer.json into the working directory
COPY composer.lock /var/www
COPY composer.json /var/www

# Set working directory
WORKDIR /var/www/

# Install dependencies for the operating system software
RUN apt-get update && apt-get install -y \
    build-essential \
    libpng-dev \
    zip \
    vim \
    git \
    curl 

# Install extensions for php
RUN docker-php-ext-install pdo pdo_mysql
RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli

# Install composer (php package manager)
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Copy existing application directory contents to the working directory
COPY . /var/www

字符串
然后我在服务器文件夹中的vhosts文件夹中添加了一个vhosts.conf文件

<VirtualHost *:80>
    ServerName localhost

    DocumentRoot /var/www/server/public
    DirectoryIndex /index.php

    <Directory /var/www/server/public>
        AllowOverride None
        Order Allow,Deny
        Allow from All

        FallbackResource /index.php
    </Directory>

    <Directory /var/www/server/public/bundles>
        FallbackResource disabled
    </Directory>
    ErrorLog /var/log/apache2/server_error.log
    CustomLog /var/log/apache2/server_access.log combined
</VirtualHost>


这种方式有点重,因为它使用Apache,但它的工作

相关问题