CORS issue when developing in local

Help
1

I have a react app running locally.
I have a directus instance deployed in the cloud

My docker file is as follows

version: "3"
services:
  directus:
    image: directus/directus:11.3.5
    ports:
      - 8055:8055
    volumes:
      - ./database:/directus/database
      - ./uploads:/directus/uploads
      - ./extensions:/directus/extensions
    environment:
      SECRET: "XX"
      ADMIN_EMAIL: "XXX"
      ADMIN_PASSWORD: "XXX"
      DB_CLIENT: "sqlite3"
      DB_FILENAME: "/directus/database/XXX.db"
      WEBSOCKETS_ENABLED: "true"
      CORS_ENABLED: true
      CORS_ORIGIN: "127.0.0.1:3000"
      CORS_METHODS: "GET,POST,PATCH,DELETE,OPTIONS"
      CORS_ALLOWED_HEADERS: "Content-Type,Authorization"
      CORS_EXPOSED_HEADERS: "Content-Range"
      CORS_MAX_AGE: 18000

However when accessing 127.0.0.1:3000 I get the following:

Access to fetch at ‘http://xx.xx.xx.xx:8055/items/test/185’ 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. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled

I have tried with also setting CORS_ORIGIN: "true" I have also tried true without quotation marks.

The only way I managed to get it to work is creating a proxy server in node that will add: res.header("Access-Control-Allow-Origin", "*"); which is missing from the response so the browser can push through the request.

2

For me, setting CORS_ENABLED and CORS_ORIGIN to true (not "true") works perfectly locally. Have you tried that?

Note that "127.0.0.1:3000" is not valid because it does not specify the protocol. You need to add either http or https.

So based on your question I think this would work for you (assuming all trafic is http):

services:
  directus:
    image: directus/directus:11.3.5
    ports:
      - 8055:8055
    volumes:
      - ./database:/directus/database
      - ./uploads:/directus/uploads
      - ./extensions:/directus/extensions
    environment:
      SECRET: "XX"
      ADMIN_EMAIL: "XXX"
      ADMIN_PASSWORD: "XXX"
      DB_CLIENT: "sqlite3"
      DB_FILENAME: "/directus/database/XXX.db"
      WEBSOCKETS_ENABLED: true
      CORS_ENABLED: true
      CORS_ORIGIN: "http://127.0.0.1:3000"