如果港口被隐藏，CORS问题与码头工人

Question

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

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

我已经添加了一个中间件，在Lumen中启用了CORS，在nginx中启用了CORS。

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

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;


    }

}

我使用的CORS中间件如下:在Lumen中启用CORS(stack overflow)

Answer 1

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

< code >命令:npm run serve

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

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

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