CORS issues for client portal in "PROD" like deployment

[jbool24]

So I've just added soft launched AgencyOS into my staging Directus instance and during testing most things seem to work ok. I've started customizing the "Blocks", pages, etc. But when I get back to the /portal related pages/functionality I'm getting the CORS issues again. The front-end is being worked on locally (obviously) and the backend is deployed in parity with what Production will look like (right now I'm using heroku).

The backend is located at a public domain such as: https://cms.example.com

I also have these ENV set on the Directus instance: in heroku:

CORS_ENABLED=true
CORS_ORIGIN=/^https:\/\/www.example.com$/,/^http:\/\/example.test:[0-9]{1,5}$/

Then on the nuxt app side, the production subdomain of the nuxt app will be @ www in PROD and then I also added a white-list entry in Directus for the testing local (as above) url which is resolved to 127.0.0.1 using dnsmasq locally on my machine.

When the portal page calls out to /login route directly for the login flow with Directus we get a CORS origin error.

@bryantgillespie a few questions:

Do you think this is just me and a user error; did I miss something?
Is that section of code trying to talk directly to Directus from the client?
If so, should the web client use its nuxt server routes for login flow, leaving all that logic in the nuxt side so that all that is same-origin?

[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

[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.