regal raft Jun 2, 2023, 2:16 PM

#

Hey there,

I am building an internal extension for my own directus, not to be used publicly. I originally performed a lot of requests to/from a URL that is another business I work with wthin Directus Flows and had no issues. I started developing a Module Extension that was able to do much more that what I was doing already. I wanted to be able to send data to this same URL but now I get CORS issues stating:

from origin 'http://localhost:8055' has been blocked by CORS policy: 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.

It is localhost because I am still testing the extension from a local directus instance. I am just performing a standard fetch GET request in the module just to test the connection. Does anyone know how to fix this issue without having to request assistance/access from the requested URL as they will take forever to respond.

dusky rainBOT Jun 2, 2023, 2:16 PM

#

Thanks for posting! This is a community powered server, so you may or may not get an answer based on available help and expertise. To increase your chances of somebody being able to help you, please help us help you making sure you:

Adding an explanation of exactly what you're trying to achieve.
Adding any and all related code or previous attempts.
Describing the exact issue or error you are facing.
Posting any screenshots if applicable.
Reading through https://stackoverflow.com/help/how-to-ask.

When you're done with this thread, please close it. Thanks! ✨

(If you have a support agreement and need help, please contact the core team via email.)

next tulip Jun 2, 2023, 2:26 PM

#

https://docs.directus.io/self-hosted/config-options.html#cors

Configuration Options | Directus Docs

Environment variables are used for all configuration within a Directus project. These variables can be defined in a number of ways, which we cover below.

#

you need to configure CORS properly when cross-domain requests are in place

valid yoke Jun 2, 2023, 2:27 PM

#

Like wolfulus says.
or, back in the day this also occured when the Directus instance crashed and if it was running after a load balancer, not sure if thats still the case tho

regal raft Jun 2, 2023, 2:28 PM

#

I have CORS_ENABLED=true and CORS_ORIGIN=true

#

this is in my .env:

Whether or not to enable the CORS headers [false]

CORS_ENABLED=false

Value for the Access-Control-Allow-Origin header. Use true to match the Origin header, or provide a domain or a CSV of domains for specific access [false]

CORS_ORIGIN=false

Value for the Access-Control-Allow-Methods header [GET,POST,PATCH,DELETE]

CORS_METHODS=GET,POST,PATCH,DELETE

Value for the Access-Control-Allow-Headers header [Content-Type,Authorization]

CORS_ALLOWED_HEADERS=Content-Type,Authorization

Value for the Access-Control-Expose-Headers header [Content-Range]

CORS_EXPOSED_HEADERS=Content-Range

Whether or not to send the Access-Control-Allow-Credentials header [true]

CORS_CREDENTIALS=true

Value for the Access-Control-Max-Age header [18000]

CORS_MAX_AGE=18000

#

didn't mean for the mde

next tulip Jun 2, 2023, 2:29 PM

#

you want to make a request to another server right?

#

in this case CORS needs to be configured in the target server

regal raft Jun 2, 2023, 2:29 PM

#

yeah

next tulip Jun 2, 2023, 2:29 PM

#

not yours

stuck forge Jun 2, 2023, 2:29 PM

#

It is hard to debug without knowing more about the requests you're doing. When something errors it is possible that the CORS headers may not have been set yet

regal raft Jun 2, 2023, 2:29 PM

#

How come it works when I perform the requests from Flows?

next tulip Jun 2, 2023, 2:29 PM

#

what you can do if you don't have access to the target server (to configure CORS headers) is to create your own endpoint to act like a proxy, so you're still dealing with your own server

regal raft Jun 2, 2023, 2:30 PM

#

yeah I did see about doing that tbh

#

just seemed strange that it would work fine with directus flows but not from an extension

next tulip Jun 2, 2023, 2:32 PM

#

because flows runs on the server

#

cors is a browser only thing

#

in this case flows were acting like your proxy

#

if you only have 1 "path"

#

like server.com/path

regal raft Jun 2, 2023, 2:32 PM

#

Oh I see, and there's no way I can utilise that somehow?

next tulip Jun 2, 2023, 2:32 PM

#

a flow with webhook trigger can do that for you

regal raft Jun 2, 2023, 2:33 PM

#

would that involve setting up some custom trigger or something?

next tulip Jun 2, 2023, 2:33 PM

#

not a custom trigger, just a webhook trigger which is builtin

regal raft Jun 2, 2023, 2:35 PM

#

ah, so similar to using useApi() in some way? I know it would probably be simpler for me to set up a proxy ofc as I am still only learning JS and Vue.js. I am running the website on a DigitalOcean server so there's probably some way I can utilise that

next tulip Jun 2, 2023, 2:37 PM

#

unsure about useApi

#

you can make a proxy using flows btw

#

the final url will be ugly though, and there's a lot to cover

stuck forge Jun 2, 2023, 2:38 PM

#

You should be able to use useApi from the browser to call a Flow trigger

#

https://docs.directus.io/reference/system/flows.html#flow-with-get-webhook-trigger

next tulip Jun 2, 2023, 2:40 PM

#

regal raft Jun 2, 2023, 2:40 PM

#

yeah I feel that either contacting the other company to allow access or setting up a proxy separately may be the best route. Essentially the GET requests aren't too much of an issue for the URL I don't have to do those. My issue is that the way I have to make requests to this URL in order to add data to their database is lengthy and not straightforward and involves a lot of different requests. Furthermore, access to the server involves requesting a cookie and then using that cookie with every request and refreshing said cookie when it runs out. It's a painful process that I thought would just be easier hand-coding rather than building in flows

next tulip Jun 2, 2023, 2:40 PM

#

regal raft Jun 2, 2023, 2:41 PM

#

But yeah, I could use Flows to at least handle the data handover right?

next tulip Jun 2, 2023, 2:41 PM

#

something like that would let you GET http://your-directus/flows/trigger/<id>/?path=/some/server/api/path

regal raft Jun 2, 2023, 2:41 PM

#

as per your images

next tulip Jun 2, 2023, 2:42 PM

#

it really depends on what you want to do, it's not going to be a clean proxy

#

btw @stuck forge would be nice if the webhook url could forward anything that comes after the id part to the flow itself, making the path available to the flow
/flows/trigger/[id]/[path*]

regal raft Jun 2, 2023, 2:43 PM

#

at least this way I could hide login credentials in the .env as well. Something I wasn't able to do easily with custom extensions

stuck forge Jun 2, 2023, 2:44 PM

#

next tulip btw <@589189049047056395> would be nice if the webhook url could forward anythin...

thats what the post trigger is for 🤔

next tulip Jun 2, 2023, 2:44 PM

#

regal raft at least this way I could hide login credentials in the .env as well. Something ...

there are extensions for client and server side, on the server you don't expose env

next tulip Jun 2, 2023, 2:44 PM

#

stuck forge thats what the `post` trigger is for 🤔

wut? let me check

regal raft Jun 2, 2023, 2:44 PM

#

haven't seen any of those but good to know!

stuck forge Jun 2, 2023, 2:45 PM

#

next tulip wut? let me check

not specifically for the URL but to send arbitrary information to the flow you're triggering

next tulip Jun 2, 2023, 2:45 PM

#

I'm not sure what you mean by post trigger though, literally a flow trigger or setting POST in webhook trigger?

stuck forge Jun 2, 2023, 2:46 PM

#

indeed https://docs.directus.io/reference/system/flows.html#flow-with-post-webhook-trigger

next tulip Jun 2, 2023, 2:47 PM

#

on what I meant was the flow could still trigger even if it was requested with more path parameters

POST /flows/trigger/<id> -> $trigger.payload.path = "/"
POST /flows/trigger/<id>/some/other/path -> $trigger.payload.path = "/some/other/path"

stuck forge Jun 2, 2023, 2:49 PM

#

next tulip on what I meant was the flow could still trigger even if it was requested with m...

true but then you'd have to specify the express path somewhere just to pass a couple extra parameters. While the post request you can send any parameters in any format you want and run with it

next tulip Jun 2, 2023, 2:49 PM

#

but anyways, went sideways on the topic, nevermind

stuck forge Jun 2, 2023, 2:49 PM

#

ah yeah sorry for derailing the conv 🙈

next tulip Jun 2, 2023, 2:49 PM

#

my bad

regal raft Jun 2, 2023, 2:49 PM

#

yeah to quickly reaffirm, your idea of utilising directus flows as a proxy was a great idea and I'm utilising it now with success!

next tulip Jun 2, 2023, 2:49 PM

#

😬

regal raft Jun 2, 2023, 2:49 PM

#

so many thank you to you guys!

#

<3

next tulip Jun 2, 2023, 2:49 PM

#

good luck

#

that was fast

#

;D

regal raft Jun 2, 2023, 2:50 PM

#

fortunately I had mostly everything set up, the proxy, it turns out, was the final hurdle

#CORS Errors with Extension

Whether or not to enable the CORS headers [false]

Value for the Access-Control-Allow-Origin header. Use true to match the Origin header, or provide a domain or a CSV of domains for specific access [false]

Value for the Access-Control-Allow-Methods header [GET,POST,PATCH,DELETE]

Value for the Access-Control-Allow-Headers header [Content-Type,Authorization]

Value for the Access-Control-Expose-Headers header [Content-Range]

Whether or not to send the Access-Control-Allow-Credentials header [true]

Value for the Access-Control-Max-Age header [18000]