Skip to content

Instantly share code, notes, and snippets.

@albertcht

albertcht/CORS-and-nginx.md

Forked from dunderrrrrr/CORS-and-nginx.md
Created August 3, 2020 13:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save albertcht/362fe220ea20836c53476ec7ec762a6d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save albertcht/362fe220ea20836c53476ec7ec762a6d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dunderrrrrr created this gist Feb 21, 2020.
    61 changes: 61 additions & 0 deletions CORS-and-nginx.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

    ## Example

    Let's say you need to add the following CORS headers.
    ```text
    Access-Control-Allow-Origin: https://example.com
    Access-Control-Allow-Methods: GET, POST, PATCH, OPTIONS
    Access-Control-Allow-Headers: Content-Type
    ```

    How? Configure this by editing `/etc/nginx/sites-available/domain.com`.

    ```text
    location / {
    add_header 'Access-Control-Allow-Origin' 'https://example.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
    }
    ```

    ## Wide-open config



    ```text
    #
    # Wide-open CORS config for nginx
    #
    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';
    }
    }
    ```
    [https://michielkalkman.com/snippets/nginx-cors-open-configuration/](https://michielkalkman.com/snippets/nginx-cors-open-configuration/)
    More information [here](https://geekflare.com/enable-cors-apache-nginx/) and [here](https://enable-cors.org/server_nginx.html).