Provide a reverse proxy with Apache to parse-server, to serve the Parse API securely over TLS/SSL

[alexrmacleod]

So this is the situation:

1: Got a website running on digital ocean with LAMP install Apache/2.4.7 (Ubuntu) (1 droplet). SSH access. website: www.goeasysmile.com

2 Setup parse-server, mongodb on my laptop at home, saving stuff via ajax (check below) like a charm,

var serverUrl = 'http://xxxx:8080/parse/classes/Subscription';
$.ajax({
                    type: "POST",
                    dataType: 'JSON',
                    beforeSend: function (request) {
                        request.setRequestHeader("X-Parse-Application-Id", 'xxxx');
                        request.setRequestHeader("X-Parse-REST-API-Key", 'xxxx');
                        request.setRequestHeader("Content-Type", 'application/json');
                    },
                    url: serverUrl,
                    data: JSON.stringify({
                        email: email
                    }),
                    processData: false,
                    success: function (success) {
                        //Clear text after success post request from input
                        $('#subscribeinput').val('');
                        // Don't know why i'm doing this
                        $(".form-group").removeClass("has-success");
                        // Animate text to tell user email is saved
                        $('#js-subscribe-result').animate({ 'opacity': '1.0' }).html('<p class="help-block text-success">' + success_msg + '</p>').delay(3000).animate({ 'opacity': '0.0' });
                        // Enable subscribe button again
                        $("#js-subscribe-btn").attr("disabled", false);
                    },
                    error: function (error) {
                        $('#js-subscribe-result').animate({ 'opacity': '1.0' }).html('<p class="help-block text-danger">Sorry. Cannot access the Node Server</p>').delay(3000).animate({ 'opacity': '0.0' });
                        $("#js-subscribe-btn").attr("disabled", false);
                    }
                });

3: Needed to take credit card payments so with ajax and cloudCode beforeSave and afterSave I integrated stripe. Then boom it's working cool.

4: Becuase of the credit card form <input> stuff I needed ssl and just did this davidoster/letsencrypt-fast#4 - letsencrypt-fast is pretty cool for free https cert gen. The site is finally https: Nice!

5: Now I got a problem, my ajax http requests won't work anymore and been looking at all types of solutions.

6: I found this https://www.digitalocean.com/community/tutorials/how-to-migrate-a-parse-app-to-parse-server-on-ubuntu-14-04 and at step 4 they use Nginx web server to provide a reverse proxy to parse-server, so that we can serve the Parse API securely over TLS/SSL.

7: So I guess my question is since I am already running Apache can I....
7.1: Install node, mongodb then ssh up my current parse-server app to the current droplet running my website. cd to parse-server and npm install then npm start, to run my parse-server app on the droplets http://localhost:8080.
7.2: then go into Apache and do something like the below and update my ajax req's url to something like https://localhost:8080/parse/classes/Subscription? how would I do this with Apache?

# Pass requests for /parse/ to Parse Server instance at localhost:1337
        location /parse/ {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://localhost:1337/;
                proxy_ssl_session_reuse off;
                proxy_set_header Host $http_host;
                proxy_redirect off;
        }

or

8: Just follow this tutorial mention on point 6 and just have nignx listen on a different ssl port other than 443 (which apache is already using) then use the same certs already generated on point 4?

I'm aware this isn't really a parse server specific question. but really lost here, any advice or direction will be deeply appreciated as it will most likely save me (potentially others) a lot of time.

The real question is... now that my site is HTTPS how do I get it to play nice with parse-server.

• after https was added to the site, when I tried to save stuff via ajax like in the ajax request example I gave. this is the error via chrome console:

catcher.js:197 Mixed Content: The page at 'https://www.goeasysmile.com/assessment' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxxx:8080/parse/classes/Assessment'. This request has been blocked; the content must be served over HTTPS.

I also found this here h t t p s : / / github.com//issues/1454 which led me to point 6

[natanrolnik]

Hi @alexrmacleod!

We use GitHub Issues for bugs. This seems more like an issue/question in your stack, than a problem in Parse Server.

If you have a non-bug question, please ask on Stack Overflow or Server Fault, and post here the link.

https://stackoverflow.com/questions/tagged/parse.com
https://serverfault.com/tags/parse