Luke Douglas
Luke Douglas

Reputation: 101

Enable Cors on node.js app with nginx proxy

I have set up a digital ocean droplet that is a reverse proxy server using nginx and node. I used this tutorial from digital ocean as a starting point

https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-14-04.

I have also set up ssl with lets encrypt. The issue I am currently having is that I am unable to make cross domain ajax calls to the server. I am getting a error of No 'Access-Control-Allow-Origin' header is present. I have set up the appropriate header response in my node app and have attempted to follow the few examples I could find for nginx with no luck. Below is my code.

nginx with my attempts at headers removed

server {
listen 443 ssl;

server_name lefthookservices.com www.lefthookservices.com;

ssl_certificate /etc/letsencrypt/live/lefthookservices.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/lefthookservices.com/privkey.pem;

 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-$
    ssl_session_timeout 1d;
    ssl_session_cache shared:SSL:50m;
    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security max-age=15768000;

location / {


    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;



}
  location ~ /.well-known {
           allow all;
    }

}

server {
    listen 80;
    server_name lefthookservices.com  www.lefthookservices.com;
    return 301 https://$host$request_uri;
}

Here is my app.js script using express

    'use strict';
var colors = require('colors/safe');

var express = require('express');

var knack = require('./knack_call.js');

var bodyParser = require('body-parser');

var cors = require('cors');

colors.setTheme({
  custom: ['blue', 'bgWhite']
});

var app = express();

app.use(bodyParser.json());


// allow for cross domain ajax

app.get('/',  function(request, response){

    response.send('hello\n');

});

app.post('/', function(request, response){

    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "X-Requested-With");
    response.header("Access-Control-Allow-Methods', 'GET,POST");

    knack.getData(request, response);
});

app.listen(8080, '127.0.0.1', function(m){
    console.log(colors.custom("Captin the server is at full strength"));
});

Any suggestion that could help me set the correct headers to allow CORS would be greatly appreciated. Thank you in advance.

As a result of Tristans answer below my Nginx code now looks like this.

server {
    listen 443 ssl;

    server_name lefthookservices.com www.lefthookservices.com;

    ssl_certificate /etc/letsencrypt/live/lefthookservices.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/lefthookservices.com/privkey.pem;

     ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        ssl_dhparam /etc/ssl/certs/dhparam.pem;
        ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES$
        ssl_session_timeout 1d;
        ssl_session_cache shared:SSL:50m;
        ssl_stapling on;
        ssl_stapling_verify on;
        add_header Strict-Transport-Security max-age=15768000;

    location / {

        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        if ($http_origin ~*(https?://.*\exponential.singularityu\.org(:[0-9]+)?$)){
            set $cors "1";
        }
        if ($request_method = 'OPTIONS') {
             set $cors "${cors}o";
           }


        if ($cors = "1") {
          more_set_headers 'Access-Control-Allow-Origin: $http_origin';
          more_set_headers 'Access-Control-Allow-Credentials: true';
          proxy_pass      http://127.0.0.1:8080;
        }

        if ($cors = "1o") {
           more_set_headers 'Access-Control-Allow-Origin: $http_origin';
           more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE';
           more_set_headers 'Access-Control-Allow-Credentials: true';
           more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept';
           add_header Content-Length 0;
           add_header Content-Type text/plain;
           return 204;
         }

        proxy_pass http://127.0.0.1:8080;




    }
}
location ~ /.well-known {
           allow all;
    }

}

Sadly this is still not working.

server {
    listen 80;
    server_name lefthookservices.com  www.lefthookservices.com;
    return 301 https://$host$request_uri;
}

Upvotes: 4

Views: 25948

Answers (3)

Luke Douglas
Luke Douglas

Reputation: 101

It turns out the error message I was getting was inaccurate. The issue was not header setting. It turned out that I needed to make the request with jsonp and I needed to handle the incoming data differently. An error in the function called by app.js was erroring and causing the connection to time out. This resulted in the appropriate headers not being returned to the browser which caused the error message.

For anyone hoping to find an NGINX config that worked this is mine.

proxy_pass http://127.0.0.1:8080;
   # proxy_http_version 1.1;
    proxy_set_header Access-Control-Allow-Origin *;
   # proxy_set_header Upgrade $http_upgrade;
   # proxy_set_header Connection '';
    proxy_set_header Host $host;
   # proxy_cache_bypass $http_upgrade;

Thanks you for the suggestions.

Upvotes: 6

Rob Wilkerson
Rob Wilkerson

Reputation: 41236

Pull Nginx out of this equation. It doesn't have anything to do with your CORs problem if your setup is as similar to mine as I believe it is. I see that you're using the cors module, but you're not actually using it that I can see.

Your settings are simply enough that you might be able to get away with the defaults so, right below app.use(bodyParser.json());, update your app.js with:

app.use(cors());

That might work right out of the box. If it doesn't, you can pass a set of options. Mine looks something like this:

app.use(cors({
    origin: myorigin.tld, 
    allowedHeaders: [ 'Accept-Version', 'Authorization', 'Credentials', 'Content-Type' ]
}));

Other config options are available in the docs.

Upvotes: 5

Tristian
Tristian

Reputation: 109

You're almost there.

You have to think of the proxy as an external server as well as your Node.js application.

So, in short, you need to add a header to your nginx configuration.

Take a look at this link, https://gist.github.com/pauloricardomg/7084524

In case this ever gets deleted:

#
# Acts as a nginx HTTPS proxy server
# enabling CORS only to domains matched by regex 
# /https?://.*\.mckinsey\.com(:[0-9]+)?)/
#
# Based on: 
# * http://blog.themillhousegroup.com/2013/05/nginx-as-cors-enabled-https-proxy.html
# * http://enable-cors.org/server_nginx.html
#
server {
  listen 443 default_server ssl;
  server_name localhost;

  # Fake certs - fine for development purposes :-)
  ssl_certificate /etc/ssl/certs/ssl-cert-snakeoil.pem;
  ssl_certificate_key /etc/ssl/private/ssl-cert-snakeoil.key;

  ssl_session_timeout 5m;

  location / {
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # Nginx doesn't support nested If statements, so we
    # concatenate compound conditions on the $cors variable
    # and process later

    # If request comes from allowed subdomain
    # (*.mckinsey.com) then we enable CORS
    if ($http_origin ~* (https?://.*\.mckinsey\.com(:[0-9]+)?$)) {
       set $cors "1";
    }

    # OPTIONS indicates a CORS pre-flight request
    if ($request_method = 'OPTIONS') {
       set $cors "${cors}o";
    }

    # Append CORS headers to any request from 
    # allowed CORS domain, except OPTIONS
    if ($cors = "1") {
       more_set_headers 'Access-Control-Allow-Origin: $http_origin';
       more_set_headers 'Access-Control-Allow-Credentials: true';
       proxy_pass      http://serverIP:serverPort;
    }

    # OPTIONS (pre-flight) request from allowed 
    # CORS domain. return response directly
    if ($cors = "1o") {
       more_set_headers 'Access-Control-Allow-Origin: $http_origin';
       more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE';
       more_set_headers 'Access-Control-Allow-Credentials: true';
       more_set_headers 'Access-Control-Allow-Headers: Origin,Content-Type,Accept';
       add_header Content-Length 0;
       add_header Content-Type text/plain;
       return 204;
    }

    # Requests from non-allowed CORS domains
       proxy_pass      http://serverIP:serverPort;
  }
}

Upvotes: 2

Related Questions