External content not loading on task

Summary

When loading resources from external hosting, CORS (Cross-Origin Resource Sharing) issues are common and can block access for security reasons. This guide provides steps to troubleshoot and resolve CORS issues for various cloud storage services and web servers.

How to Troubleshoot CORS Issues

1. Check Browser Console for Errors:

   • Open the browser console (Ctrl + Shift + i for Chrome) and look for CORS-related errors.

1. Cloud Storage Configuration:

   • Amazon S3: Follow the Amazon S3 User Guide for configuring CORS.
   • Google Cloud Storage (GCS): Refer to the GCS documentation for setting up CORS.
   • Microsoft Azure: Use the Azure documentation to configure CORS for Azure Storage.

2. Service Account Permissions:

   • Ensure the Service Account has the correct roles and permissions, such as roles/iam.serviceAccountTokenCreator.

3. Enable Debug Logs:

   • If the Service Account name is causing issues, enable DEBUG logs using the --log-level DEBUG flag in the label-studio start command.

4. Web Server Configuration:

   • Nginx: Add the following lines to the /etc/nginx/nginx.conf file within the location section:

   • location { 
        if ($request_method = 'OPTIONS') { 
          add_header 'Access-Control-Allow-Origin' '*'; 
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
          # 
          # Custom headers and headers various browsers *should* be OK with but aren't 
          # 
          add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; 
          # 
          # Tell client that this pre-flight info is valid for 20 days 
          # 
          add_header 'Access-Control-Max-Age' 1728000; 
          add_header 'Content-Type' 'text/plain; charset=utf-8'; 
          add_header 'Content-Length' 0; 
          return 204; 
         } 
          if ($request_method = 'POST') { 
            add_header 'Access-Control-Allow-Origin' '*'; 
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; 
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; 
          } 
          if ($request_method = 'GET') { 
             add_header 'Access-Control-Allow-Origin' '*'; 
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
             add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; 
             add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; 
           } 
       }

   • Python HTTP Server:

   • npm install http-server -g
     http-server -p 3000 --cors

Conclusion

To resolve CORS issues, ensure that your cloud storage and web server configurations allow cross-origin requests. Properly configure CORS settings and verify that your Service Account has the necessary permissions. If issues persist, enable debug logs to identify specific problems.