Bug: CORS error

shrey

@martinkbs Hey. Are those workflows responding to cross-origin client requests as well?

Sure, I've posted an example of the workflow in this issue that I've raised on the n8n forum:

https://community.n8n.io/t/cors-error-in-scenario-where-reverse-proxy-manipulation-is-not-available/25054

martinkbs

Hi @shrey

I have tried to reproduce the CORS error you mention, but in all my attempts, everything works correctly.

I have created a workflow from the example you left in the n8n support forum on an instance of n8n running on Cloudron.

When calling the webhook url from the browser itself, the workflow starts without problems.

And when I make an HTTP Request from another n8n instance (with a different domain) on a different server running Cloudron, the response is the same.

shrey

@martinkbs

Requests from the browser address bar don't invoke CORS (as far as i understand) which is why those calls are successful. (They also don't invoke Preflight requests, which trigger CORS checking, as seen in the browser network console)
Requests from another n8n instance are server based requests, which is different from client-based requests, the ones in question here.

If you want to try it out on your end, simply create an index.html with this basic code and host it on any webserver (Note: don't skip including the Authorization header in the request). Load the page and inspect the network console.

<!doctype html>
<html>
    <head>
        <title>CORS Testing</title>
    </head>
    <body>
        <script>
            const main = async function(){
                const a1 = await fetch("your-webhook-url",{
                    headers: {
                        "Authorization": "Bearer your-token"
                    }
                });
                console.log({a1});
            }
            main();
        </script>
    </body>
</html>

PS:
An n8n team member has just replied on my post in the n8n forum regarding this, stating that reverse proxy config is the only way to go.

The use-case here is pretty simple, and one of the primary use-cases of n8n: as 'the' backend for a frontend. In today's microservices architecture based ecosystems, i find this to be pretty prevalent.

@nebulade Thanks for the details.
While i will raise a feature request, it might be a good idea to include such caveats in the Cloudron docs as well. It's quite a bit of pain to end up realising later that the project one started isn't going to be feasible at all.

martinkbs

@shrey

For that use case, you might want to use a webhook router such as Hookdeck or Convoy.

As you can see below, the process works without errors:

shrey

@martinkbs Sure. Thanks for the nice suggestions.

Nevertheless, having to use another tool, just for this, sort of defeats using a broad-range tool like n8n.

nebulon

@shrey thanks for raising this also in the n8n forum. Our perspective is usually to add features to the platform if it is useful for multiple apps and use-cases, to justify building it and also maintaining it outside an app itself. So far this just wasn't an issue otherwise, so lets see how interest in that develops.

I will mark this as closed/solved as further discussion should happen as a feature request to push this forward.

girish

@shrey said in Bug: CORS error:

I guess will have to do that.

Can it be expected to do this natively, in Cloudron, in the near-future?

Yes, can you open a feature request thread. We can priorotize based on interest and collect use cases.

Also, Girish mentioned that this fix is not persistent. What exactly does that imply?

Some releases rewrite nginx config which will result in custom changes getting lost. Unfortunately, till then you have to manually track your custom changes somehow .

shrey

@nebulon Sure, will raise the Feature Request.

Does a Feature Request also need to be raised for modifying the docs, to mention this caveat in the n8n section?

girish

@shrey one is fine I will update the docs with instructions on how to add CORS as a workaround.

shrey

@girish https://forum.cloudron.io/topic/9021/capability-to-tweak-reverse-proxy-config-of-an-app

Cloudron makes it easy to run web apps like WordPress, Nextcloud, GitLab on your server. Find out more or install now.

Cloudron Forum

Bug: CORS error