Vue example doesn't work - fails with CORS error

[phlummox]

Possibly related to the issue with the Nuxt example, #187.

Version used

• this repository: commit 8790e61
• directus: 9.22.1
• docker-compose: version 1.24.0, build 0aa59064

Steps to reproduce (on Ubuntu 22.04)

• Clone the repo

  git clone https://github.com/directus/examples

• In a terminal, cd into directus within the repo, and docker-compose up

• In another terminal,cd into vue within the repo, then

  $ docker run --rm -it -v $PWD:/work --network=host --workdir /work --entrypoint bash node:20.0.0-bullseye

  and within the Docker container:

  $ cp .env.example .env
  # test that we can reach Directus
  $ curl http://127.0.0.1:8055/admin
  $ npm run dev

• Visit http://localhost:3000/ (or http://127.0.0.1:3000)

  Open up the Javascript console/developer tools in a browser, and observe error messages like:

  Access to XMLHttpRequest at 'http://127.0.0.1:8055/items/articles?fields[]=*&fields[]=author.avatar&fields[]=author.first_name&fields[]=author.last_name&sort=-publish_date' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  

Comments

The docker-compose.yml file (added in commit 196c3fe) does not appear to be correct. In my version of docker-compose, the .env file isn't picked up at all, so the CORS variables (CORS_ENABLED and CORS_ORIGIN) in it are never set.

(You can observe this by, for example, changing the PORT in the .env file to, say, 8056; it doesn't get processed by Directus at all.)

The docker documentation on environment variable precedence (https://docs.docker.com/compose/environment-variables/envvars-precedence/) says an environment key in the .yml file takes precedence over an .env file, so I am guessing this is the intended behaviour for Docker. The docker-compose.yml presumably needs to be fixed somehow.

If the .env file is manually processed (e.g. by adding to the .yml file entrypoint: ["sh", "-c", "tail -f /dev/null"] to get a running container, docker exec-ing in, and manually source-ing the .env file and running docker-entrypoint.sh), then Directus does indeed work without CORS issues.

Presumably this has been a problem the entire time the docker-compose.yml file has existed in this repository; testing the examples to make sure they work might be a good idea in future.

[github-actions]

Linear: ENG-916

[phlummox]

Just noting, for anyone who comes across this issue, that I don't believe it actually has been fixed yet - but since the Vue example no longer includes a valid docker-compose file (issue #192), it's difficult to tell.