Remote access to CVAT, unable to connect remotely via LAN or internet domain (via <HOST-IP>:port or <FQDN>:port). Blocked by CORS policy: No 'Access-Control-Allow-Origin, Network Error and net::ERR CONNECTION REFUSED errors.

[pvalls]

I deployed CVAT on an AWS instance and I struggled to access it remotely.

The errors I encountered along the way were:

Could not check authorization on the server. Error: Network Error.

blocked by CORS policy: No 'Access-Control-Allow-Origin'

net::ERR_CONNECTION_REFUSED

Nevertheless, finally I managed to get it working. Following I report the solutions to this errors so it can help others and to prepare a PR to contribute.

Gathering of related issues:

• Issue 930: Unable to remote connect Unable to remote connect  #930

• Issue 907: Remote access issue Remote access issue #907

• Issue 165: How can I connect from other computers which are NOT on the LAN? How can I connect from other computers which are NOT on the LAN? #165

• Issue 102:Connection from another computer gives Bad Request(400) Connection from another computer gives Bad Request(400) #102

• Issue 4: Running on AWS EC2 Running on AWS EC2 #4

• Issue 128: Access CVAT remotely via <HOST_IP>:port or <FQDN>:port? Access CVAT remotely via <HOST_IP>:port or <FQDN>:port?  #128

Solution:

The following changes did the trick for me:

1. Add following line to react_nginx.conf:
   add_header Access-Control-Allow-Origin "*";

A react_nginx.conf example would be:

server {
    root /usr/share/nginx/html;
    # Any route that doesn't have a file extension (e.g. /devices)
    
    location / {
        try_files $uri $uri/ /index.html;
        add_header Access-Control-Allow-Origin "*";
    }
}

2. To docker-compose.override.yml, add:
   
   ALLOWED_HOSTS: '*'

UI_HOST: mysite.com

REACT_APP_API_HOST: mysite.com

A docker-compose.override.yml example would be:

version: "2.3"

services:
  cvat:
    environment:
      ALLOWED_HOSTS: '*'
      UI_HOST: mysite.com
    ports:
      - "80:8080"

  cvat_ui:
    build:
          args:
            REACT_APP_API_HOST: mysite.com
            REACT_APP_API_PORT: 8080

Don't forget to run the docker build again, using -f to include the file docker-compose.override.yml file. An example of this would be:

$ docker-compose -f docker-compose.yml  -f docker-compose.override.yml build

$ docker-compose -f docker-compose.yml  -f docker-compose.override.yml up -d

3. To the cvat/settings/base.py file. In lines 188 to 200, add a version of the UI_URL without the port number to CORS_ORIGIN_WHITELIST. I believe the reason for this is that sometimes if the port number is :80 and the URL is not in the LAN (<HOST-IP>:port), but instead it is a Fully Qualified Domain Name (<FQDN>:port), the port 80 is redundant (mydomain.com:80) and the errors arise.

My modified base.py is:

# Cross-Origin Resource Sharing settings for CVAT UI
UI_SCHEME = os.environ.get('UI_SCHEME', 'http')
UI_HOST = os.environ.get('UI_HOST', 'localhost')
UI_PORT = os.environ.get('UI_PORT', '3000')
CORS_ALLOW_CREDENTIALS = True
CSRF_TRUSTED_ORIGINS = [UI_HOST]
UI_URL = '{}://{}'.format(UI_SCHEME, UI_HOST)

# UI_WITHOUT_PORT must be added to CORS_ORIGIN_WHITELIST 
UI_WITHOUT_PORT = UI_URL

if len(UI_URL):
    UI_URL += ':{}'.format(UI_PORT)

CORS_ORIGIN_WHITELIST = [UI_URL, UI_WITHOUT_PORT]
CORS_REPLACE_HTTPS_REFERER = True

[PavneshYadav123]

i am getting this error while executing this command:
docker-compose -f docker-compose.yml -f docker-compose.override.yml up -d

[pvalls]

@PavneshYadav123 the error comes from incorrect indentation of your docker-compose.override.yml

Fix the indentation of cvat_ui or copy my docker-compose.override.yml example

[PavneshYadav123]

@pvalls
i want to execute CVAT on my website
i have done following changes on

1)changes in base.py

**line no 28:**
              ALLOWED_HOSTS = os.environ.get('ALLOWED_HOSTS', 
                                    'localhost,127.0.0.1,labelytics.trantorglobal.com').split(',')
**line no 188 to 200:**
              UI_WITHOUT_PORT = UI_URL
              CORS_ORIGIN_WHITELIST = [UI_URL, UI_WITHOUT_PORT]

2)Changes in Docker-compose.yml

**added new code line no 56**
        ALLOWED_HOSTS: '*'
**line no 58** 
        UI_HOST: labelytics.trantorglobal.com
**line no 81** 
        REACT_APP_API_HOST: labelytics.trantorglobal.com

3)Changes in react_nginx.conf

added new code line no 6
add_header Access-Control-Allow-Origin "*";

if i am giving UI_HOST and REACT_APP_API_HOST as IP address insted of URL it is workig fine but it is not working on URL what should i do
I have attach all file along with server and URL
Please suggest me

[pvalls]

@PavneshYadav123 you might need to change the cvat UI port to 80 and configure services to have

ports:
      - "80:80"

You might also need to open connections to port 8080 on your server provider configuration (e.g. on AWS security group add rule to allow incoming connections to port 8080).

Finally, I suggest you ask for help on your issues in the Gitter CVAT chat

[nmanovic]

@PavneshYadav123 , did you resolve the issue?

[PavneshYadav123]

@nmanovic yes

[nmanovic]

@PavneshYadav123 , we will close the issue. Thank you.

[yxftju]

I still cannot remote access ，got an authentic error on webpage，even though I do this follow the method you metion. Any solutions?

[LukeAI]

Is using CVAT on remote machines/servers not a very common use-case? Might it be possible to patch CVAT to be able to do this without having to make so many complicated config changes? Or at least Add these instructions to the Wiki? (I'd be happy to do the latter if it would be welcome?)

[nmanovic]

@yxftju , @LukeAI , now it became more difficult just because we use different ports for UI and server. The question was answered many times in Gitter. If you still cannot access your instance remotely please create an issue and submit your config files. Otherwise it is impossible to investigate.

In the nearest future we will simplify configuration of CVAT.