Enabling CORS for one or more containers in docker-letsencrypt-nginx-proxy-companion

Question

I have a Wordpress server running in https://example.com and an API server in https://tensorflow.example.com

I use a Docker Compose to use Let's Encrypt certificates for the servers:

services:

  nginx-proxy:
    build: ./proxy
    container_name: nginx-proxy
    restart: always
    ports:
      - 80:80
      - 443:443
    labels:
      com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy: "true"
    volumes:
      - conf:/etc/nginx/conf.d
      - vhost:/etc/nginx/vhost.d
      - nginx-html:/usr/share/nginx/html
      - dhparam:/etc/nginx/dhparam
      - certs:/etc/nginx/certs:ro
      - /var/run/docker.sock:/tmp/docker.sock:ro
    networks:
      - proxy-tier

  letsencrypt:
    image: jrcs/letsencrypt-nginx-proxy-companion
    container_name: nginx-proxy-le
    restart: always
    volumes:
      - certs:/etc/nginx/certs
      - vhost:/etc/nginx/vhost.d
      - nginx-html:/usr/share/nginx/html
      - /var/run/docker.sock:/var/run/docker.sock:ro
    networks:
      - proxy-tier
    depends_on:
      - nginx-proxy

  wp:
    image: "wordpress"
    container_name: wordpress-apache
    restart: "always"
    volumes:
      - "wordpress:/var/www/html"
    environment:
      - VIRTUAL_HOST=example.com
      - LETSENCRYPT_HOST=example.com
      - [email protected]
      - WORDPRESS_DB_HOST=wp-db
      - WORDPRESS_DB_USER=wordpress
      - WORDPRESS_DB_PASSWORD=wordpress565#
      - WORDPRESS_DB_NAME=wordpress
    networks:
      - proxy-tier
    ports:
      - 8091:80

  tf:
    image: "hacklaen/tensorflow-1.13-no"
    container_name: tf-flask
    restart: "always"
    volumes:
      - "tf:/var/lib/tf"
      - "tmp:/tmp"
    environment:
      - VIRTUAL_HOST=tensorflow.example.com
      - VIRTUAL_PORT=5000
      - LETSENCRYPT_HOST=tensorflow.example.com
      - [email protected]
    networks:
      - proxy-tier
    ports:
      # Default port of the FLASK webserver
      # Expose port 5000 to docker-internal networks AND as port 8150 to the host system
      - "8150:5000"

volumes:
  conf:
  vhost:
  nginx-html:
  dhparam:
  certs:
  wordpress:
    external:
      name: wordpress_html
  tf:
    external:
      name: tensorflow-webserver_tf

networks:
  proxy-tier:

In Wordpress I call the API with the URL https://tensorflow.example.com/api/predict/single-image

When doing so using Chrome I get the following error message:

(index):1 Access to XMLHttpRequest at 'https://tensorflow.example.com/api/predict/single-image' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If enabling CORS with a plugin in Chrome the API call returns as expected.

My question: Is their a possibility in configure the Docker image of NGINX to allow CORS without modifying the browser?

Answer 1

Short answer is yes but how exactly depends on your setup. I don't know the current configuration of your nginx proxy but I assume that you are sending HTTP/S requests to nginx which passes it to your tensorflow backend (otherwise the nginx plays not role in it).

The CORS error is being triggered because your tensorflow backend is not setting the necessary headers (such as Access-Control-Allow-Origin) but you can configure nginx to add headers along the way.

Basically you need to configure nginx to respond to preflight (OPTIONS) request instead of passing that request to your backend.

Where to place to configuration? If you don't know then the correct place is probably going to be /etc/nginx/conf.d/default.conf. But I am assuming that you know because you somehow had to configure that proxy-pass in the first place.

Once you locate the config file that you want to modify (the one that is handling the routing), you can configure the response with appropriate headers.

...
location / {
     if ($request_method = 'OPTIONS') {
        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 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     } 
     ...
}

Again, this is only an example and the location / part depends on your actual config.