Cause and resolution to CORS (Access-Control-Allow-Origin) error and issues

Many complains about Access-Control-Allow-Origin settings result in numerous CORS errors. Here is the root cause and solution:

Example config: docker-compose.yml:

services:
  registry-server:
    image: registry:2.8.2

  registry-ui:
    container_name: registry-ui
    image: joxit/docker-registry-ui:main

services and ports:

registry url (bind to multiple ports): 192.168.0.1:5000 (remote), 127.0.0.1:5000(local)
ui server url: http://192.168.0.1:80

Root cause: When you open url http://192.168.0.1:80 in browser, browser then try to request the registry url, and error happens here:

• If you don't explicitly set REGISTRY_URL in docker-compose.yml, browser try to request the wrong default url of http://192.168.0.1:80/v2/_catalog?n=1000. But registry server run on 192.168.0.1:5000 (remote), 127.0.0.1:5000(local), the request will failed.
• If you had set the REGISTRY_URL in docker-compose.yml with correct value of http://192.168.0.1:5000, browser then try to request the url and CORS error occurred because Access-Control-Allow-Origin not set correctly.

Solution:

1. explicitly set REGISTRY_URL in docker-compose.yml:

REGISTRY_URL=http://192.168.0.1:5000 

2. correctly set the Access-Control-Allow-Origin: You only need to one of these two: In registry server section of docker-compose.yml:

environment:
    REGISTRY_HTTP_HEADERS_Access-Control-Allow-Origin: '["*"]' 

or in config.yml of registry server:

http:
  addr: :5000
  headers:
    Access-Control-Allow-Origin: ["*"]

3. Done, no need to install browser CORS extensions or use deprecated static version.