Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
}
like image 525
Luke Douglas Avatar asked Feb 06 '23 23:02

Luke Douglas


1 Answers

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.

like image 180
Luke Douglas Avatar answered Feb 16 '23 02:02

Luke Douglas