burhan-syed / troddit

A web client for Reddit with authenticated logins and a variety of browsing options
https://www.troddit.com
GNU Affero General Public License v3.0
551 stars 80 forks source link

CORS errors on Firefox #176

Open bielej opened 1 year ago

bielej commented 1 year ago

I'm getting CORS errors in Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.reddit.com/hot/.json?&raw_json=1&t=&after=&count=0&sr_detail=true. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.reddit.com/hot/.json?&raw_json=1&t=&after=&count=0&sr_detail=true. (Reason: CORS request did not succeed). Status code: (null).


- When logged in:
```Failed to load ‘https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true"}]’. workbox-50de5c5d.js:1:212
Failed to load ‘https://oauth.reddit.com/subreddits/mine/subscriber?after=&before=&count=0&limit=100’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://oauth.reddit.com/subreddits/mine/subscriber?after=&before=&count=0&limit=100"}]’. workbox-50de5c5d.js:1:212
Failed to load ‘https://oauth.reddit.com/api/multi/mine’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://oauth.reddit.com/api/multi/mine"}]’. workbox-50de5c5d.js:1:212
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oauth.reddit.com/subreddits/mine/subscriber?after=&before=&count=0&limit=100. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oauth.reddit.com/api/multi/mine. (Reason: CORS request did not succeed). Status code: (null).

Failed to load ‘https://oauth.reddit.com/api/multi/mine’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://oauth.reddit.com/api/multi/mine"}]’. workbox-50de5c5d.js:1:212
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oauth.reddit.com/api/multi/mine. (Reason: CORS request did not succeed). Status code: (null).

Failed to load ‘https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true"}]’. workbox-50de5c5d.js:1:212
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true. (Reason: CORS request did not succeed). Status code: (null).

Failed to load ‘https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true"}]’. workbox-50de5c5d.js:1:212
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true. (Reason: CORS request did not succeed). Status code: (null).

Failed to load ‘https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘Error: no-response :: [{"url":"https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true"}]’. workbox-50de5c5d.js:1:212
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oauth.reddit.com/hot?raw_json=1&t=&after=&count=0&sr_detail=true. (Reason: CORS request did not succeed). Status code: (null).

My docker-compose.yml:

---
version: "2.1"
services:
  troddit:
    image: me/troddit:latest
    container_name: troddit
    environment:
      - NEXTAUTH_SECRET=[redacted]
      - NEXTAUTH_URL=https://reddit.mydomain.com
      - CLIENT_ID=[redacted]
      - CLIENT_SECRET=[redacted]
      - REDDIT_REDIRECT=https://reddit.mydomain.com/api/auth/callback/reddit
    ports:
      - 3096:3000
    restart: unless-stopped

My nginx config:

server {

    server_name reddit.mydomain.com;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
    add_header X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";
    add_header X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
    include /etc/nginx/snippets/error_pages.conf;
    aio threads;

 set $cors_origin "";
    set $cors_cred   "";
    set $cors_header "";
    set $cors_method "";

    if ($http_origin ~ '^https?://(localhost|reddit\.mydomain\.com)$') {
            set $cors_origin $http_origin;
            set $cors_cred   true;
            set $cors_header $http_access_control_request_headers;
            set $cors_method $http_access_control_request_method;
    }

    add_header Access-Control-Allow-Origin      $cors_origin;
    add_header Access-Control-Allow-Credentials $cors_cred;
    add_header Access-Control-Allow-Headers     $cors_header;
    add_header Access-Control-Allow-Methods     $cors_method;

    location / {
        proxy_pass http://localhost:3096;
        proxy_set_header Host $http_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;
        proxy_set_header X-Forwarded-Protocol $scheme;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header Connection "keep-alive";
        proxy_store off;
        proxy_send_timeout 600s;
        proxy_read_timeout 600s;
        proxy_buffering off;

    }

    listen 443 ssl http2;
    ssl_certificate [redacted]
    ssl_certificate_key [redacted]
}
server {
    listen 80;
    server_name reddit.mydomain.com;
    return 301 https://$server_name$request_uri;
}

It's mostly visible on Firefox Mobile (with ETP disabled). Opening the site for the first time works fine. But if I restart the browser I'm getting these errors - only hard refreshing (holding the Refresh button) helps. The same happened on desktop Firefox but adding the CORS headers helped. Connecting to the container directly gives same results. Can't get it to work on mobile - any tips?