Issue with mixed content using AngularJS, Parse-Server, and Heroku

Question

I have a node server running parse-server that I have hosted on Heroku using the free tier. I built a web app using AngularJS that retrieves data from the server. After developing it locally I also hosted the webapp on Heroku, and for some reason I get a mixed content warning for all my images that look like this:

Mixed Content: The page at 'https:// MYWEBAPP.herokuapp.com' was loaded over HTTPS, but requested an insecure image
'http:// MYPARSESERVER.herokuapp.com/parse/files/SOMEIMAGE.jpg'. This content should also be served over HTTPS.

My parse-server is using https, but for some reason just requests for files seem to go through http.

Since this is my first time building and hosting the entire stack, I'm not entirely sure if this is an issue with my Angular app, my parse-server configuration, or just a heroku setting.

If someone has any ideas as to where the problem could potentially be I can provide code snippets to help clarify. Thanks for the help!

Code samples:

In app.js in my angular app:

function parseInit($rootScope) {
    Parse.initialize("MY_APP_ID");
    Parse.serverURL = 'https://MY_PARSE_SERVER.herokuapp.com/parse';

    $rootScope.currentUser = Parse.User.current();
}

An example of retrieving data from the backend, including the File objects that seems to be causing the problem:

function getEvents() {
   let q = $q.defer();

   let Event = Parse.Object.extend('Event');
   let query = new Parse.Query(Event);

   query
     .include('poster')
     .find({
       success: (events) => {
         q.resolve(events);
       },
       error: (object, error) => {
         q.reject(error);
       }
     });

   return q.promise;
 }

In app.js in my parse-server:

const express = require('express');
const ParseServer = require('parse-server').ParseServer;
const ParseDashboard = require('parse-dashboard');
const path = require('path');
const env = require('./env.json');

var node_env = process.env.NODE_ENV || "development";
var config = env[node_env];

var api = new ParseServer({
   databaseURI: process.env.MONGODB_URI || config.databaseUri,
   cloud: process.env.CLOUD_CODE_MAIN || __dirname + '/cloud/main.js',
   appId: MY_APP_ID,
   masterKey: MY_MASTER_KEY,
   serverURL: process.env.SERVER_URL || config.serverUrl, 
   facebookAppIds: ["MY_FACEBOOK_APP_ID"],
   revokeSessionOnPasswordReset: true
});

var dashboard = new ParseDashboard({
   "apps": [{
      "serverURL": process.env.SERVER_URL || config.serverUrl,
      "appId": config.appId,
      "masterKey": config.masterKey,
      "appName": "api",
   }]
});

var app = express();

// Serve the Parse API on the /parse URL prefix
var mountPath = process.env.PARSE_MOUNT || '/parse';
app.use(mountPath, api);
app.use("/dashboard", dashboard)

var port = process.env.PORT || 1337;
app.listen(port, function() {
  console.log('Running on port ' + port + '.');
});

process.env.SERVER_URL is passed as by my heroku set up and is currently https:// MY_PARSE_SERVER.herokuapp.com/parse

Answer 1

This question is pretty vague, your issue could be anywhere in the stack or more involved with the overall application configuration.

Assuming you've properly configured everything server-side...

From the AngularJS side, I would look anywhere you have a <image> (from your error message) or <script> tag in a template and ensure that you're requesting the resource using https and not http.