Getting CORS errors on Traefik

[modem7]

To echo #66 I'm also getting CORS errors.

 ###########
 ##Spotify##
 ###########

  spotify:
    image: yooooomi/your_spotify_server
    container_name: SpotifyServer
    restart: always
    networks:
      pihole:
        ipv4_address: '172.22.0.140'
      isolated:
    ports:
      - "42777:8080"
    depends_on:
      - spotifydb
    environment:
      - API_ENDPOINT=https://spotifyapi.$DOMAINNAME # This MUST be included as a valid URL in the spotify dashboard
      - CLIENT_ENDPOINT=https://spotify.$DOMAINNAME
      - SPOTIFY_PUBLIC=$SPOTIFY_PUBLIC
      - SPOTIFY_SECRET=$SPOTIFY_SECRET
      # - CORS=https://spotifyapi.$DOMAINNAME,https://spotify.$DOMAINNAME
      - CORS=all
      - MONGO_ENDPOINT=mongodb://spotifydb:27017/your_spotify
    labels:
      # - backup
      - autoheal=true
      - "traefik.enable=true"
      ## HTTP Routers
      - "traefik.http.routers.spotifyapi-rtr.entrypoints=https"
      - "traefik.http.routers.spotifyapi-rtr.rule=Host(`spotifyapi.$DOMAINNAME`)"
      - "traefik.http.routers.spotifyapi-rtr.tls=true"
      ## Middlewares
      # - "traefik.http.routers.spotifyapi-rtr.middlewares=chain-authelia@file"
      - "traefik.http.routers.spotifyapi-rtr.middlewares=chain-no-auth@file"
      ## HTTP Services
      - "traefik.http.routers.spotifyapi-rtr.service=spotifyapi-svc"
      - "traefik.http.services.spotifyapi-svc.loadbalancer.server.port=8080"
  
  spotifyweb:
    image: yooooomi/your_spotify_client
    container_name: SpotifyClient
    restart: always
    networks:
      pihole:
        ipv4_address: '172.22.0.141'
    ports:
      - "32271:3000"
    environment:
      - API_ENDPOINT=https://spotifyapi.$DOMAINNAME
    depends_on:
      - spotifydb
    labels:
      # - backup
      - autoheal=true
      - "traefik.enable=true"
      ## HTTP Routers
      - "traefik.http.routers.spotify-rtr.entrypoints=https"
      - "traefik.http.routers.spotify-rtr.rule=Host(`spotify.$DOMAINNAME`)"
      - "traefik.http.routers.spotify-rtr.tls=true"
      ## Middlewares
      # - "traefik.http.routers.spotify-rtr.middlewares=chain-authelia@file"
      - "traefik.http.routers.spotify-rtr.middlewares=chain-no-auth@file"
      ## HTTP Services
      - "traefik.http.routers.spotify-rtr.service=spotify-svc"
      - "traefik.http.services.spotify-svc.loadbalancer.server.port=3000"
      ## Flame Dashboard
      - flame.type=application # "app" works too
      - flame.name=Spotify
      - flame.icon=https://raw.githubusercontent.com/modem7/MiscAssets/4e0147d0f4ca3db2e72a319d7c1701edcb08d347/Icons/spotify.svg # Optional, default is "docker"

  spotifydb:
    container_name: SpotifyDB
    networks:
      - isolated
    image: mongo:4.4
    volumes:
      - $USERDIR/Spotify/DB:/data/db

If I go to the API, I get "Hello!", so that should certainly be working.

Logs from server container:

today at 00:40:23yarn run v1.22.15
today at 00:40:23$ node ./lib/migrations.js
today at 00:40:24info: Starting migrations
today at 00:40:24info: Migrations successfully ran
today at 00:40:24Done in 0.76s.
today at 00:40:24yarn run v1.22.15
today at 00:40:24$ node lib/bin/www
today at 00:40:25info: Starting loop for 0 users
today at 00:41:11GET /me 401 1.531 ms - -
today at 00:41:11GET /global/preferences 200 27.451 ms - 68
today at 00:41:53GET /register 404 3.781 ms - 147
today at 00:41:56GET / 200 1.107 ms - 7
today at 00:41:56GET /favicon.ico 404 1.452 ms - 150
today at 00:42:25info: Starting loop for 0 users

[Yooooomi]

I must admit that your compose file is pretty fancy :) For CORS errors, it might be your reverse proxy removing some headers. As I rewrote the backend in typescript few days ago I will check this afternoon that I did not break this part. However, I'm using it daily behind a nginx reverse proxy and never had cors issue. I'll investigate further but the problem might come from your setup.

[Yooooomi]

It seems that you can configure cors on traefik. It can sometimes block them before sending the response.

https://www.reddit.com/r/Traefik/comments/iq0aip/cors_how_to_make_it_work_with_traefik_v2x/

https://github.com/traefik/traefik/issues/5567

[Yooooomi]

I can confirm that I have no CORS issue when setting to all and using different domain names such as apispotify.domain.com and frontspotify.domain.com

[modem7]

Heya,

Thank you, and thanks for checking!

I'm currently a bit inundated this end with work, so haven't had time to investigate it at this end yet.

Are you happy for us to shelve this for now until I figure out a suitable solution I can post for others to use in case it comes up again?

[Yooooomi]

If you can confirm that this is on your end we can close for now if you want, I am not in a hurry of closing this so as you want. Good luck for your work

[RafhaanShah]

Hey I had some similar errors regarding CORS and Traefik but did get it working, just commenting here in case it helps anyone out 😁

https://doc.traefik.io/traefik/middlewares/http/headers/#cors-headers

I had to add the following middleware header options (I use yaml but it would be similar for the labels etc):

accessControlAllowHeaders:
  - "content-type"
accessControlAllowOriginList:
  - "your-spotify.my-domain.com"
accessControlAllowCredentials: true

and the env options:

CLIENT_ENDPOINT="your-spotify.my-domain.com"
API_ENDPOINT="your-spotify-backend.my-domain.com"

[lukasklinger]

Here are the labels I am using on the your_spotify_server deployment to get it to work, maybe this helps someone here :)

    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=web"
      - "traefik.http.routers.spotiauth.rule=Host(`spotiauth.example.com`)"
      - "traefik.http.routers.spotiauth.entrypoints=https"
      - "traefik.http.routers.spotiauth.tls.certresolver=letsencrypt"
      - "traefik.http.services.spotiauth.loadbalancer.server.port=8080"
      # rdr HTTP to HTTPS
      - "traefik.http.routers.spotiauth-rdr.rule=Host(`spotiauth.example.com`)"
      - "traefik.http.routers.spotiauth-rdr.entrypoints=http"
      - "traefik.http.middlewares.spotiauth-rdr.redirectscheme.scheme=https"
      - "traefik.http.routers.spotiauth-rdr.middlewares=spotiauth-rdr"
      # CORS header
      - "traefik.http.middlewares.spotiauth-cors.headers.accesscontrolallowmethods=GET,POST,PUT,DELETE"
      - "traefik.http.middlewares.spotiauth-cors.headers.accesscontrolalloworiginlist=https://spotify.example.com"
      - "traefik.http.middlewares.spotiauth-cors.headers.accesscontrolallowcredentials=true"
      - "traefik.http.middlewares.spotiauth-cors.headers.accesscontrolmaxage=100"
      - "traefik.http.middlewares.spotiauth-cors.headers.addvaryheader=true"
      - "traefik.http.middlewares.spotiauth-cors.headers.accessControlAllowHeaders=Content-Type"
      - "traefik.http.routers.spotiauth.middlewares=spotiauth-cors"

[Yooooomi]

@lukasklinger You might have issue since last release since now there are PUT and DELETE methods :)

[lukasklinger]

Updated the comment above after testing it out 👍 Works perfectly 😄