Unable to login - The web application can't communicate with the server

[kennnyshiwa]

After one of the recent updates I am unable to login. All I receive is The web application can't communicate with the server

This is my current compose, i was orginially using the non linuxserver image, but swapped to that to see if it would help

version: "3"

services: your_spotify: image: lscr.io/linuxserver/your_spotify:latest container_name: your_spotify environment:

• PUID=1000
• PGID=1000
• TZ=Etc/UTC
• APP_URL=https://your_spotify.kstj.us
• SPOTIFY_PUBLIC=
• SPOTIFY_SECRET=
• CORS=http://your_spotify:8081,https://your_spotify,https://your_spotif
• MONGO_ENDPOINT=mongodb://mongo:27017/your_spotify_db ports:
• 8082:80
• 6443:443 restart: unless-stopped mongo: container_name: mongo image: mongo:6 volumes:
• ./your_spotify_db:/data/db

and from dev tools i get the following in firefox, also tried edge which gives me the same codes

Content-Security-Policy: The page’s settings blocked the loading of a resource at https://your_spotify.kstj.us/api/me (“connect-src”). xhr.js:258:12 Object { stack: "sc@https://your_spotify/static/js/main.388d2e49.js:2:402107\nXc</</u.onerror@https://your_spotify/static/js/main.388d2e49.js:2:416999\n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest } thunk.ts:14:14 Content-Security-Policy: The page’s settings blocked the loading of a resource at https://your_spotify/api/global/preferences (“connect-src”). xhr.js:258:12 Object { stack: "sc@https://your_spotify./static/js/main.388d2e49.js:2:402107\nXc</</u.onerror@https://your_spotify.kstj.us/static/js/main.388d2e49.js:2:416999\n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }

[thiagosanches]

Hey there! @kennnyshiwa

I wanted to share that I've successfully enabled CORS for all by following these steps:

However, it's important to consider the security implications before fully implementing this solution. I enabled it for testing purposes as I encountered a similar issue like yours. Make sure to evaluate if this approach aligns with your security requirements.

Perhaps you only need to specify your allowed origins, and that should suffice.

[Yooooomi]

Hello @kennnyshiwa , can you try on chrome? This is something implemented in this release so yeah I recognize but it may differ with chrome. If it works on chrome I'll implement a fix otherwise we'll see what's wrong.

[Yooooomi]

Also I see you're using the Linux server image, can you try using the native one? They may have made a mistake by their side.

[kennnyshiwa]

@Yooooomi

Same issue in chrome, and same issue between both container images.

This is the compose with your image in it, this is what i was originally using before I had the problem. Swapped to linux server to see if it fixed it there. Both images have the same problem. Other compose below

version: "3"

services: server: image: yooooomi/your_spotify_server restart: always ports:

• "8082:8080" links:
• mongo depends_on:

• mongo environment: API_ENDPOINT: https://api-your_spotify # This MUST be included as a valid URL in the spotify dashboard (see below) CLIENT_ENDPOINT: https://your_spotify SPOTIFY_PUBLIC: SPOTIFY_SECRET: CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins

  web: image: yooooomi/your_spotify_client restart: always ports:

• "3000:3000" environment: API_ENDPOINT: https://api-your_spotify

  mongo: container_name: mongo image: mongo:6 volumes:

• ./your_spotify_db:/data/db

[Yooooomi]

I tried inspecting with the url you forgot to redact, it feels that when accessing your backend directly through url, I encounter a "Bad Gateway" error, can you confirm? It seems that your backend is not booted or accessible, thus the CSP is failing.

[kennnyshiwa]

@Yooooomi I can get to both URLs without an issue, both via url and direct IP/Port.

your_spotify takes me to port 3000 for the front end. api-your_spotify takes me to 8082 where i'm meet with Hello! from the api

[skyfra]

Hi! Same problem here since the last update 🤔

[Yooooomi]

@kennnyshiwa can you send both your frontend and backend url via discord if you don't mind? @yooooomi_

[Yooooomi]

Okay I found the issue, a new version should be out this evening.

[RagingCactus]

@kennnyshiwa FYI, underscores in host/domain names aren't allowed and aren't supported by lots of software. For example, I know for a fact that underscores in host names break URL parsing in Java programs. And in this case, the issue is that they are unsupported in the browser's content security policy (CSP; see https://www.w3.org/TR/CSP3/#grammardef-host-char).

While the latest release makes the CSP work (by relaxing it more and allowing all origins), I suspect you will run into other problems in the fruture and would recommend not using underscores in your domain and host names.

[Yooooomi]

Fixed in release 1.9.1 with #373

[renolation]

hello, i have same problem here is my docker compose, if i use ip:port it works, but when change to domain, sub domain it didnt

version: "3"

services:
  server:
    image: yooooomi/your_spotify_server
    restart: always
    ports:
      - "8085:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: https://spotify-server.xxx.com # This MUST be included as a valid URL in the spotify dashboard
      CLIENT_ENDPOINT: https://spotify.xxx.com
      SPOTIFY_PUBLIC: 
      SPOTIFY_SECRET: 
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins

  mongo:
    container_name: mongo
    image: mongo:6
    volumes:
      - ./your_spotify_db:/data/db

  web:
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3005:3000"
    environment:
      API_ENDPOINT: https://spotify-server.xxx.com

[stripedew]

For anyone else looking this up, for me it was a stupid oversight of Nginx Proxy Manager assigning my custom domains HTTPS while the URLs in the docker-compose were standard HTTP

[kmanwar89]

For anyone else looking this up, for me it was a stupid oversight of Nginx Proxy Manager assigning my custom domains HTTPS while the URLs in the docker-compose were standard HTTP

I saw this and had some hope as I'm also using NPM, but I have the same issue and changing HTTP to HTTPS, or vice versa, doesn't help :(

[kcb064]

I am also having an issue similar to this.

I am using Cloudflare Tunnels and am able to reach both of my API_ENDPOINT and CLIENT_ENDPOINT individually externally with the URL I define in my tunnel. From the API_ENDPOINT URL I am able to login and see my Spotify app name. However when accessing the CLIENT_ENDPOINT url I receive the error "The web application can't communicate with the server" and when clicking Login button, the URL in the address bar goes to "http://localhost:8080/oauth/spotify" instead of the API_ENDPOINT/oauth/spotify which is what I would expect

Happy to open a new issue if needed.

My docker compose is:

version: "3"
services:
  server:
    image: yooooomi/your_spotify_server
    restart: always
    ports:
      - 9191:8080
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: https://spotifyapi.******.net # This MUST be included as a valid URL in the spotify dashboard (see below)
      CLIENT_ENDPOINT: https://spotify.******.net
      SPOTIFY_PUBLIC: *******
      SPOTIFY_SECRET: *******
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins
  mongo:
    container_name: mongo
    image: mongo:6
    volumes:
      - /mnt/data/spotify/db:/data/db
  web:
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - 3000:3000
    environment:
      API_ENDPOINT: https://spotifyapi.******.net
networks: {}

EDIT:

I can also see the Server logs show I am logged into the Spotify app successfully:

music-server-1  | [info]  [DbLoop] starting for 1 users
music-server-1  | [info]  [**My Name]: refreshing...
music-server-1  | [info]  Refreshed token for **My Name