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

Question

我正在尝试从 vue 前端应用程序连接到 Lumen 后端 api。但我想在不暴露后端 api 端口的情况下进行，所以它会全部在内部处理。我想要这个的原因是因为 api 的一些端点是 public，现在作为一个小应用程序我不想担心任何人在外部调用 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，它如何与本地主机一起工作但不能在内部网络中工作？

这是 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 (Whosebug)

Answer 1

vue.js 开发服务器 returns CORS 错误，因为你运行你在开发模式下的前端：

command: npm run serve

你可以通过在vue js配置中使用proxy 属性轻松解决这个问题。

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

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

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

CORS issue with Docker if port is hidden

nginx

cors

docker

vue.js

lumen