如果端口被隐藏，Docker 的 CORS 问题

Posted 2023-03-04

【中文标题】如果端口被隐藏，Docker 的 CORS 问题

【英文标题】：CORS issue with Docker if port is hidden

【发布时间】：2021-02-15 10:03:42

【问题描述】：

我正在尝试从 vue 前端应用程序连接到 Lumen 后端 api。 但我想在不暴露后端 api 端口的情况下做到这一点，所以这一切都将在内部处理。 我想要这个的原因是因为 api 的某些端点是公共的，现在作为一个小型应用程序，我不想担心任何人在外部调用 api。

对于后端 api，我使用的是 nginx。

我已经添加了一个中间件来在 Lumen 中启用 CORS，并在 nginx 中启用了 CORS 这就是我的 docker-compose.yml 文件的外观：

version: "3.7"
services:
  backend:
    build:
      context: ./docker/php-fpm
      dockerfile: Dockerfile
    container_name: ecommerce-backend
    restart: unless-stopped
    working_dir: /var/www/
    volumes:
      - ./backend:/var/www
    networks:
      - ecommerce

  frontend:
    build:
      context: ./docker/vue
      dockerfile: Dockerfile
    container_name: ecommerce-frontend
    command: npm run serve
    volumes:
      - ./frontend:/app
    ports:
      - 8081:8080
    networks:
      - ecommerce

  nginx:
    image: nginx:alpine
    container_name: ecommerce-nginx
    restart: unless-stopped
  #if uncomment ports it works
  #ports:
    #  - 8000:80
    volumes:
      - ./backend:/var/www
      - ./docker/nginx:/etc/nginx/conf.d/
    networks:
      - ecommerce

networks:
  ecommerce:
    driver: bridge

如果我连接到前端容器并调用：http://nginx/api，我会从 api 得到响应，但是当我通过 vue 调用它时，会出现 CORS 错误。 我不明白的是，如果我在 Nginx 和 Lumen 中允许 CORS，它如何与 localhost 一起工作，但不能在内部网络中工作？

这是 nginx.conf 的外观：

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/public;
    location ~ \.php$ 
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass backend:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;

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

        add_header 'Access-Control-Allow-Origin' "*" always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;


    

我使用了 Lumen 的 CORS 中间件： Enable CORS in lumen (***)

【参考方案1】：

当您在开发模式下运行前端时，返回 CORS 错误的是 vue.js 开发服务器：

command: npm run serve

您可以使用 vue js 配置中的 proxy 属性轻松解决此问题。

module.exports = 
  devServer: 
    proxy: 'http://localhost:8000'
  

在生产设置中，如果 nginx 服务还提供客户端捆绑包，您的配置应该可以工作。