Add CORS to Nginx on AWS Elastic Beanstalk

01_add_cors.config.yaml

container_commands:
  01_fix_static_cors:
    command: "/tmp/fix_static_cors.sh"
files:
  "/tmp/fix_static_cors.sh":
    mode: "000755"
    owner: root
    group: root
    content: |
      #!/bin/bash
      pushd $(/opt/elasticbeanstalk/bin/get-config container -k config_staging_dir)
      echo "Adding CORS Config"
      PROXY_CONF="#etc#nginx#conf.d#00_elastic_beanstalk_proxy.conf"
      grep static_cors.config $PROXY_CONF || sed -i '/location \/static {/a \ \ \ \ include /etc/nginx/conf.d/static_cors.config;' $PROXY_CONF
  "/etc/nginx/conf.d/static_cors.config":
    mode: "000644"
    owner: root
    group: root
    content: |
        #
        # Wide-open CORS config for nginx
        #
        if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin' '*';
          #
          # Om nom nom cookies
          #
          add_header 'Access-Control-Allow-Credentials' 'true';
          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,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          #
          # 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-Credentials' 'true';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
          add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        if ($request_method = 'GET') {
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
          add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }

Gold. Thank you!

Thanks - this was a great starting point for me. I ended up restricting it to an origin whitelist something like this:

        if ($http_origin ~ '^https?://(www\.mydomain\.com|mydomain\.com|xyz42ab42cd42ef\.cloudfront\.net)) {
          add_header 'Access-Control-Allow-Origin' "$http_origin" always;
          add_header 'Access-Control-Allow-Credentials' 'true' always;
          add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
          add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }

can you explain how to use this

@Nitish9711 I honestly don't remember...

I think it might have to go into the .ebextensions folder in your source code of the app you're pushing to EB.

https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/ebextensions.html

https://coderwall.com/p/wyikua/adding-cors-settings-to-nginx-on-aws-elastic-beanstalk this was actually the original thing that links to this gist. Just FYI.