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.