Cors error when looking at details of image

[Paultje52]

Bug description

I'm getting a cors error when visiting the page of a specifc image.

How to Reproduce

My docker-compose file

version: '3'

services:
  registry:
    restart: always
    image: registry:2
    ports:
    - "5000:5000"
    environment:
      REGISTRY_AUTH: htpasswd
      REGISTRY_AUTH_HTPASSWD_REALM: Registry
      REGISTRY_AUTH_HTPASSWD_PATH: /auth/registry.password
      REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY: /data
    volumes:
      - ./auth:/auth
      - ./data:/data
      - ./config.yml:/etc/docker/registry/config.yml

  ui:
    image: joxit/docker-registry-ui:latest
    ports:
      - 5001:80
    environment:
      - REGISTRY_TITLE=Docker Registry
      - REGISTRY_URL=some_url
      - SINGLE_REGISTRY=true
    depends_on:
      - registry

My private docker registry configuration

version: 0.1
log:
  fields:
    service: registry
storage:
    delete:
      enabled: true
http:
  addr: :5000
  headers:
    Access-Control-Allow-Origin: ['https://docker-ui.paultje52.me']
    Access-Control-Allow-Methods: ['GET', 'OPTIONS', 'HEAD']
    Access-Control-Allow-Headers: ['Authorization']
    Access-Control-Allow-Credentials: [true]

Expected behavior

I would expect the page to load and show all the relevant information

Screenshots

Note: the main page (with the catalog request) works without any problems.

System information

• OS: Ubuntu (debian)
• Browser:
  • Name: Chrome
  • Version: 125.0.6422.142
• Docker registry UI:
  • Version: Latest (v2)
  • Server: docker
  • Docker version: 26.1.4, build 5650f9b
  • Docker registry ui tag: latest
  • OS/Arch: linux/amd64
  • Tools: docker-compose

[alexanderbazhenoff]

Hi. It's not possible to see on your screenshots what port you connect with GET request. You also exposed port 5000 on registry-server, but 443 was mentioned on your screenshot. Or if you connect directly to exposed port of registry server (5000) what's a question about UI? :)

Anyway I also have setup with user:password authorization on Registry server, but I din't have any problems using docker or skopeo commands (my problems is self-signed TLS validation when UI connects to Registry Server only). You can take a look here, may be you'll find something helpful.

Also take a look at this page about 'CORS'.

[Joxit]

Hi, thank you for using my project and submitting issues.

Are you using token authentication? If so, you may need to configure the CORS policy of your auth server.

Keycloak's one wasn't working so I made this example with a nginx proxy: https://github.com/Joxit/docker-registry-ui/blob/main/examples%2Ftoken-auth-keycloak%2Fconf%2Fproxy%2Fnginx.conf

[Paultje52]

You also exposed port 5000 on registry-server, but 443 was mentioned on your screenshot

The docker registry runs on port 5000, but I'm routing it through nginx. That is why I'm connecting to port 443 in my docker registry ui.

Are you using token authentication? If so, you may need to configure the CORS policy of your auth server.

I'm using basic auth (username-password). When looking at the dev tools, I can see that the preflight request does not include any authentication. That's probably why I am getting the cors error. When I manually make the request to my docker registry, I'm not encountering any problems.

[Joxit]

The preflight request is not meant to return any authentication. The browser will send the OPTION request and the server must return a 200 response with specific headers in its response. If the header aren't present, you will not be able to authenticate via your browser.

Required headers are :

Access-Control-Allow-Credentials: "true"
Access-Control-Allow-Headers: "Content-Type, Accept, Authorization"
Access-Control-Allow-Methods: "OPTIONS, GET"
Access-Control-Allow-Origin: "<your origin>"

So if your server is not sending these headers on the OPTION request, check the nginx configuration in the keycloak example I shared