CORS issues for client portal in "PROD" like deployment about agency-os

[bryantgillespie]

I closed it because it looks like you've created a secondary report here and it's been labeled as a bug within the API.
directus/directus#20577

It doesn't seem to be an "AgencyOS" issue per say.

[jbool24]

Ok. Thanks. Didn't see that ticket got updated. Thanks, Bryant.

[jbool24]

It looks like the Pre-flight request headers are missing for the Access-Control-Allow-Origin with my configured white-list.

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type,Authorization
Access-Control-Allow-Methods: GET,POST,PATCH,DELETE
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 18000
Alt-Svc: h3=":443"; ma=86400
Content-Length: 0
Content-Security-Policy: script-src 'self' 'unsafe-eval';worker-src 'self' blob:;child-src 'self' blob:;img-src 'self' data: blob:;media-src 'self';connect-src 'self' https://*;default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline'
Date: Fri, 10 Nov 2023 18:36:40 GMT
Server: cloudflare
Vary: Origin
Via: 1.1 vegur
X-Powered-By: Directus

[daver987]

It looks like the Pre-flight request headers are missing for the Access-Control-Allow-Origin with my configured white-list.

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type,Authorization
Access-Control-Allow-Methods: GET,POST,PATCH,DELETE
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 18000
Alt-Svc: h3=":443"; ma=86400
Content-Length: 0
Content-Security-Policy: script-src 'self' 'unsafe-eval';worker-src 'self' blob:;child-src 'self' blob:;img-src 'self' data: blob:;media-src 'self';connect-src 'self' https://*;default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline'
Date: Fri, 10 Nov 2023 18:36:40 GMT
Server: cloudflare
Vary: Origin
Via: 1.1 vegur
X-Powered-By: Directus

I had similar issues fighting with cors, I went through and changed all the data fetching to be from the server side, no need to fetch from the client when your using Nuxt anyways, However if you add these into Directus it should solve your cors errors.

  CONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC: "array:http://localhost:* http://0.0.0.0:8055 https://examplesite.com self"
  CONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC: "array:http://localhost:* http://0.0.0.0:8055 https://examplesite.com self"
  CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC: "array:http://localhost:* http://0.0.0.0:8055 https://examplesite.com self"
  CONTENT_SECURITY_POLICY_DIRECTIVES__CONNECT_SRC: "array:http://localhost:* http://0.0.0.0:8055 https://examplesite.com self"

[jbool24]

@daver987 Thanks, I'll give that a try.

Even if this works, I still think there might still be an unexpected bug. The only error difference I see between a fresh install of this stack as a control to test against my "half-production" setup is the Origin error. I feel like the code responding from Directus may have just forgot to include that headers because I can't make it show up no matter how/what I config in the ENV vars. The error below is an example error after the ENV vars are configured as in the original post (CORS_ENABLED, CORS_ORIGIN}.

signin:1 Access to fetch at 'https://cms.[REDACTED].com/auth/login' from origin 'http://[REDACTED].test: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.

[jbool24]

@bryantgillespie this wasn't resolved. Please re-open