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.

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 #930

• Issue 907: Remote access issue #907

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

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

• Issue 4: Running on AWS EC2 #4

• Issue 128: 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 "*";
    }
}

1. 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

1. 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

[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?)

[MimirRnD]

@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.

I have seen many labelling tools and it seems to be nerds that make them incapable of making anything sensible. Why even have an open source tool when no one can install them I have now spent days on this tool, days on dataturks and most other tools seems to be made for coders. If you cannot make simple tools stay away from it and keep coding in your corners. It is not supposed to be rocket science and we should for sure not change servers, PCs and everything because you cannot make simple configuration. This pisses me off completely and it is not even worth using any open source if you have the attitude of “we have answerred this question so many times” Well guys, there is reason why people ask. Because you obviously cannot make it understandable for most people. So either ditch the CVAT or make it work for normal people and not coders.

I do not know if this is because of the millenial attitude or if it is because I did hard hacking when I was younger (that is now 30 years ago) where you had to make sure things worked into the bare bones of the processor. But the annotation tool area is a complete mess. Why even use react. Rubbish and crap that only generates errors. MAde for the ones that wear the baseball cap backwards… Or is it because it is cool… Well…