Strange behavior of self-hosted version

[amorev]

Describe the bug

• I can open n8n interface only in Google Chrome anonymous mode
• I cannot make REST request to my workflow because of CORS

To Reproduce
Steps to reproduce the behavior:
I used docker for initialize application

1. Try to open http://s3.obvu.ru:5678/ in non anonymous mode and it will not work
2. Now try to open it in anonymous mode - it will open
3. I created simple workflow - http://s3.obvu.ru:5678/webhook/5/webhook/test. It works if open it as a page
4. Trying to make fetch (fetch('http://s3.obvu.ru:5678/webhook/5/webhook/test')) causing me error
   

Expected behavior
I expected that I'll be able to use it in simple google chrome tab and use it as rest api for simple frontend

Environment (please complete the following information):

• OS: Ubuntu Server 18.04
• n8n Version - 0.67.3
• Node.js Version 12.16.3

[janober]

Thanks a lot @amorev for reporting this issues.

I can open n8n interface only in Google Chrome anonymous mode
Did you try to delete all cookies and cache? Because I did never hear of that problem and can currently not think of a reason why it would do that.

I cannot make REST request to my workflow because of CORS
Here it seems more like regular browser behavior is the issue. If you make the request "normally" by opening it in a new tab it works. Also if you try via curl:

curl http://s3.obvu.ru:5678/webhook/5/webhook/test

It would also work if you are on the same domain. So if you visit http://s3.obvu.ru:5678/webhook/5/webhook/test and then run
fetch('http://s3.obvu.ru:5678/webhook/5/webhook/test') in the console it will also work.

If you want to call it in the browser from a different domain (and or port) you should be able to do that by adding a response header like Access-Control-Allow-Origin: * to make it work from everywhere if you need that for some reason. Similar to what it does when developing n8n:
https://github.com/n8n-io/n8n/blob/master/packages/cli/src/Server.ts#L286

Hope that helps!

[amorev]

Server of n8n always returns access-control-allow-origin: http://localhost:8080 inspite of what I wrote in webhook configuration

[amorev]

Even in production mode I see such a problem.

And thank you for your replies:) Problem with anonymous mode solve by turninf off fri-gate extenstion

[janober]

Very strange. I just tested it and it works totally fine for me.

So if I use this node:

{
  "nodes": [
    {
      "parameters": {
        "path": "webhook",
        "responseMode": "lastNode",
        "options": {
          "responseHeaders": {
            "entries": [
              {
                "name": "Access-Control-Allow-Origin",
                "value": "http://example.com:1234"
              }
            ]
          }
        }
      },
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        507,
        295
      ]
    }
  ],
  "connections": {}
}

It displays this to me in Chrome:

[amorev]

There is no problem with POST request. It shows * as allow origin.

But if I make OPTIONS request I'll receive this:

Google Chrome makes Options request before making post and if origin is not allowed, post will not be made(

[janober]

Ah sorry totally overlooked that you make an OPTIONS request. Yes, this one is currently not supported by n8n. That is why you also get the "404 Not Found". If you define a Webhook for POST it will only listen to POST requests and not for anything else like GET, OPTIONS, ...

Honestly not sure right now what a good fix for this could be... Probably have to think about that a little bit.

[amorev]

Thanks for your reply!

[amorev]

I think I now how to fix it. I'll try to upgrade Webhook module locally and make PR if I success)

[janober]

Great, thanks a lot!

The problem is, however, less of a technical one more of a design one and to think about if it makes sense in the long term and future use cases. Looking forward to your solution!

[Rupenieks]

Hi @amorev ,

Could you try setting your NODE_ENV environment variable to production?
Reference on n8n environment variables: https://docs.n8n.io/reference/configuration.html#publish

The "localhost:8080" value is hardcoded to the Access-Control-Allow-Origin header when n8n is not in production in order to deal with a CORS issue between the backend and frontend.

[iranika]

Hi guys,
I used Nginx for this problem. I share the config for you :)

server {
    listen 80;
    server_name example.com;
    proxy_set_header    Host    $host;
    proxy_set_header    X-Real-IP   $remote_addr;
    proxy_set_header    X-Forwarded-Host    $host;
    proxy_set_header    X-Forwarded-Server  $host;
    proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
        proxy_pass http://localhost:5678;
    }
}

thanks!

[RicardoE105]

Thanks for sharing @iranika. @amorev could you figure it out?

[SantoshSrinivas79]

A combination of nginx config and NODE_ENV setting (both as mentioned above) worked for me on a self-hosted server!

[krynble]

Closing this issue for now as a solution was posted. Feel free to reopen or make a new issue if you encounter any other problems.

[rohanrajpal]

Hey, I'm using railway.app to self host n8n. Is there no way to fix this without a nginx config change? Since I cant do that in railway.app

[dobromyslov]

server {
    ...
    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
        proxy_pass http://localhost:5678;
    }
}

This no longer works because n8n already sends Access-Control-Allow-Origin *;.

n8n/packages/cli/src/AbstractServer.ts

Line 271 in 40a934b

res.header('Access-Control-Allow-Origin', '*');

You need to remove that line from the config and add extra headers to Access-Control-Allow-Headers:

location / {
  add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
  add_header Access-Control-Allow-Headers "Origin, Authorization, Accept, Content-Type, X-Requested-With";
  add_header Access-Control-Allow-Credentials true;
  proxy_pass http://localhost:5678;
}

At the same time, n8n provides full CORS support using middleware. Cors middleware is loaded only when your webhook runs in the development mode:

n8n/packages/cli/src/AbstractServer.ts

Line 154 in 40a934b

this.app.use(corsMiddleware);

@netroy It looks like thorough refactoring and implementing custom CORS options in the WebHook trigger are still needed.