Sometimes form shows on page, sometimes not - CORS issue

[din14970]

Thanks for making this really cool tool, exactly what I was looking for on my blog! I have this annoying, difficult to reproduce issue, of which I'm not entirely sure it's a bug or some problem with my own configuration but I thought I'd share here just in case. When I load a page, more often than not the comment section does not appear. When I inspect the element, Firefox and Chrome give me the errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cusdis.domain.com/js/iframe.umd.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

and

Access to script at 'https://cusdis.domain.com/js/iframe.umd.js' from origin 'https://domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

respectively. The strange thing is that Firefox sometimes IS able to load the comment box without an error, without changing any configuration. I honestly don't know anything about CORS, tried looking into it and messing with my nginx configuration, but I keep getting different kinds of errors, which makes me think it might be a bug of some kind. Apologies if it isn't.

About my system and configuration: I'm trying to run cusdis on my VPS where my static blog is also hosted. OS is Debian 10, I'm using nginx as webserver, and certbot to manage SSL certificates. I created a subdomain cusdis.domain.com since my blog already uses domain.com. I created a docker-compose config as stated in the docs using postgresql, and have set - NEXTAUTH_URL=https://cusdis.domain.com (and of course modified passwords & usernames). My nginx configuration:

server {

        root /var/www/html/domain.com;

        index index.html;

        server_name domain.com www.domain.com;

        location / {
                try_files $uri $uri/ =404;
                error_page 404 /404.html;
        }

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    server_name cusdis.domain.com;

    access_log /var/log/nginx/cusdis.domain.com.log proxy;

    location / {
        proxy_pass       http://localhost:3000;
        proxy_set_header Host      $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
       
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

[Terramoto]

Hello,

I was experiencing the same issue, mine was not intermittent. I set the header Access-Control-Allow-Origin for /js/* to my domain and that fixed the issue.

[din14970]

@Terramoto Thanks for replying to this. How did you do this exactly if I could ask? I tried adding add_header 'Access-Control-Allow-Origin' '*' as well as add_header 'Access-Control-Allow-Origin' '/js/*' to the cusdis.domain.com block but that didn't resolve my issue. If I do the former I get the error that "Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed", if I do the latter, I get "CORS header ‘Access-Control-Allow-Origin’ does not match ‘/js/*’".

[Terramoto]

@Terramoto Thanks for replying to this. How did you do this exactly if I could ask? I tried adding add_header 'Access-Control-Allow-Origin' '*' as well as add_header 'Access-Control-Allow-Origin' '/js/*' to the cusdis.domain.com block but that didn't resolve my issue. If I do the former I get the error that "Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed", if I do the latter, I get "CORS header ‘Access-Control-Allow-Origin’ does not match ‘/js/*’".

This is what i think, iframe js file seems to be the only one that's not sending the cors headers, so if you set 'Access-Control-Allow-Origin' to any cusdis.domain.com request it will report multiple headers setup as one of the js will have it. So you need to setup the header specifically for files loaded from cusdis.domain.com/js/*. I use Caddy so the header setting is setup this way:

Header /js/* Access-Control-Allow-Origin 'https://mydomain.com'

If you know a way to apply this to particular requests on Nginx it should work.

[din14970]

Ah of course, genius, thanks a lot!! For nginx, I added

location /js/* {
    add_header 'Access-Control-Allow-Origin' 'https://domain.com';
}

into the cusdis.domain.com server block. Adding the header to the location / server block does not work. This seems to do the trick on some machines, on others I'm still getting issues but this may be due to some nginx caching issues.

[DeMiro5001]

Ah of course, genius, thanks a lot!! For nginx, I added

location /js/* {
    add_header 'Access-Control-Allow-Origin' 'https://domain.com';
}

into the cusdis.domain.com server block. Adding the header to the location / server block does not work. This seems to do the trick on some machines, on others I'm still getting issues but this may be due to some nginx caching issues.

Could you please share your working nginx config ? where to add it ?

[din14970]

Unfortunately it still doesn't work. It worked for a bit but then not anymore. No idea why it works sometimes and why not other times.

[lauichan]

location / {
    proxy_pass http://localhost:3000;
    ...
    if ($uri = '/js/iframe.umd.js') {
        add_header 'Access-Control-Allow-Origin' 'https://domain.com';
    }
}

I am using it like this I don't know if this is correct, but there was no CORS issue.

[DeMiro5001]

location / {
    proxy_pass http://localhost:3000;
    ...
    if ($uri = '/js/iframe.umd.js') {
        add_header 'Access-Control-Allow-Origin' 'https://domain.com';
    }
}

I am using it like this I don't know if this is correct, but there was no CORS issue.

That's amazing. It's working. I'll setup a clean installation (I played with a lot of settings) this weekend

[din14970]

@nauicha thanks a lot for sharing your config, I've tested this and for now it seems to work!

[DeMiro5001]

It works for one domain unless I set it to '*' so it works everywhere

[zgq354]

Set a CORS header config in next.config.js works for me. It is more directly which only changing the next.js service.

https://nextjs.org/docs/api-reference/next.config.js/headers

eg:

  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          { key: "Access-Control-Allow-Origin", value: "https://xxxxxxxxxxxx.com" },
        ],
      },
    ]
  },

[aheneneu]

I spent two days trying to figure out how to make CORS work with my self-hosted instance of cusdis.

My cusdis server is running behind nginx-proxy in a Docker container. I created a specfial config file <CUSDIS_DOMAIN>_location and put it into ssl/vhosts.d of nginx-proxy config directory (it may be different for other setups, make sure you check on that). With that, content of <CUSDIS_DOMAIN>_location file will be injected into the location part of nginx config of a particular domain.

Contents of <CUSDIS_DOMAIN>_location:

if ($uri = '/js/iframe.umd.js') {
  add_header 'Access-Control-Allow-Origin' $http_domain;
}

I just removed proxy_pass http://localhost:3000; because I'm already using proxy, and replaced domain name with $http_domain. With that, CORS works with both local and public instances of my website.

Kudos to @nauicha!