CORS issue with Docker if port is hidden

I am trying to connect to a Lumen backend api from a vue frontend app. But I would like to do it without exposing the backend api port, so it would all be handled internally. The reason I want this is because some endpoints of the api are public, and for now as its a small application I don't want to worry about anyone calling the api externally.

For the backend api I am using nginx.

I already added a Middleware to enable CORS in Lumen, and enabled CORS in nginx This is how my docker-compose.yml file looks:

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

If I connect to the frontend container and call: http://nginx/api, I get a response from the api, but when I call it through vue I get a CORS error. What I don't understand is how it is possible if I am allowing CORS in Nginx and Lumen, it works with localhost but not inside the internal network?

This how nginx.conf looks:

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;


    }

}

And the CORS middleware for Lumen I used the following: Enable CORS in lumen (Stackoverflow)

Solution

It is the vue.js dev server that returns the CORS error as you are running your frontend in dev mode:

command: npm run serve

You can solve this easily by using the proxy property in the vue js config.

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

In a production setup your config should work if the nginx service also provides the client bundle.