0

I've got two containers, one for a frontend app (build with Sveltekit) and the another for a backend app (Laravel, Nginx, MySQL).

I'm trying to access my backend app from my frontend, but I'm getting the following error:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/auth/login' from origin 
'http://localhost:8080' has been blocked by CORS policy: Response to preflight request 
doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains 
multiple values '*, *', but only one is allowed.

xhr.js:220          POST http://127.0.0.1:8000/api/auth/login net::ERR_FAILED

Weird enough, I can access the API from my REST client, meaning that my backend app is accessible from outside the container.

Here's my Nginx config:

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

Here's my backend's docker-compose file:

version: "3.9"
services:
  app:
    build:
      context: ./
      dockerfile: Dockerfile
    image: dmc
    container_name: dmc-app
    restart: unless-stopped
    working_dir: /var/www/
    depends_on:
      - db
      - nginx
    volumes:
      - ./:/var/www/
      - ./docker/php/conf.d/xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
      - ./docker/php/conf.d/error_reporting.ini:/usr/local/etc/php/conf.d/error_reporting.ini
    expose:
      - "9003"
    networks:
      - dmc-net

  nginx:
    image: nginx:1.23.2-alpine
    container_name: dmc-nginx
    restart: unless-stopped
#    environment:
#      PHP_IDE_CONFIG: "serverName=dmc-server"
    ports:
      - "8000:80"
    volumes:
      - ./:/var/www
      - ./docker-compose/nginx:/etc/nginx/conf.d
    networks:
      - dmc-net

  db:
    image: mysql:8.0.31
    container_name: dmc-db
    restart: unless-stopped
    # using 3307 on the host machine to avoid collisions in case there's a local MySQL instance installed already.
    ports:
      - "3307:3306"
    # use the variables declared in .env file
    environment:
      MYSQL_HOST: ${DB_HOST}
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: abcd1234
      MYSQL_USER: ${DB_USERNAME}
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    volumes:
      - ./docker-compose/mysql:/docker-entrypoint-initdb.d
      - mysql-data:/var/lib/mysql
    networks:
      - dmc-net

networks:
  dmc-net:
    driver: bridge

volumes:
  mysql-data:

and here's my frontend's docker-compose file:

version: "3.9"

services:
  dmc-web:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: dmc-web
    restart: always
    ports:
      - "3000:3000"
      - "3010:3010"
      - "8080:8080"
      - "5050:5050"
      - "24678:24678"
    volumes:
      - ./:/var/www/html

what am I missing? why can I access my backend from my REST client but not from my frontend app?

Thanks

MrCujo
  • 1,218
  • 3
  • 31
  • 56
  • The server which the request is being sent to needs to be CORS-enabled. Otherwise, browsers won’t allow frontend JavaScript code to access the response. A REST client running outside the browser can access the response even if the server isn’t CORS-enabled. – sideshowbarker Dec 05 '22 at 05:00
  • serverside CORS doesn't block your request, it's your browser blocking it. Rest clients generally don't care about CORS, CORS are extra rules for your browser to adhere to block malicious requests from non-verified webpages. – Ben Gooding Dec 05 '22 at 10:25
  • You can see the problem is that you have a typo in your laravel CORS rules `'*, *'` – Ben Gooding Dec 05 '22 at 10:26
  • should just be `*`, this config is declared in your middleware – Ben Gooding Dec 05 '22 at 10:26
  • @BenGooding no, that was not the problem. No sure if it was you who closed the question but I don't believe it should have been closed as this is pretty specific to this Laravel setup. It is not a typo and the config is not declared by default in the middleware, you have to manually add it, you must add `HandleCors::class` as part of your middleware (`api` for my case) – MrCujo Dec 05 '22 at 15:13
  • it is enabled by default for laravel applications https://github.com/laravel/laravel/blob/9.x/app/Http/Kernel.php#L19 – Ben Gooding Dec 05 '22 at 18:05
  • well, as I mentioned I had to manually add it to `$middlewareGroups`, otherwise I was getting the said error, was perhaps because all my routes are wrapped in a group? I'm not sure – MrCujo Dec 05 '22 at 20:16

0 Answers0