Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

My application works locally but when it comes time to deploy I get the following issue in the Chrome developer console.

Mixed Content: The page at 'MY URL' was loaded over HTTPS, but requested an insecure resource 'http://localhost:4000/graphql'. This request has been blocked; the content must be served over HTTPS.

I don’t have any reference to localhost when I deploy so the fact I get this error is driving me crazy.

My deployment bucket is pointing to my domain, and I created a certificate and distribution to have enable HTTPS.

In my handler.js I have the following code and added output.headers['Access-Control-Allow-Credentials'] = 'true'; because from my research this is required to work with HTTPS.

exports.graphqlHandler = function graphqlHandler(event, context, callback) {
    function callbackFilter(error, output) {
        // eslint-disable-next-line no-param-reassign
        output.headers['Access-Control-Allow-Origin'] = '*';
        output.headers['Access-Control-Allow-Credentials'] = 'true';
        callback(error, output);
    }

My YAML looks like this for my app-backend

functions:
  graphql:
    handler: handler.graphqlHandler
    events:
    - http:
        path: graphql
        method: post
        cors: true
  api:
    handler: handler.apiHandler
    events:
    - http:
        path: api
        method: get
        cors: true

And just for sanity’s sake this is where I am initializing my Apollo client i replace http://localhost:4000

const networkInterface = createNetworkInterface({ uri: 'https://XXX.execute-api.us-west-1.amazonaws.com/production/graphql' });

Update:

So chrome blocks blocks my data from being fetch when the site loads, the shield on the address bar shows up and says my site wants to load unsafe scripts, so if I select to load them my app works fine, I think because it is somehow referencing http://localhost:4000/ still because nothing else i am loading is using http. But I do not know how to get away from it.

[gertst]

I had the same issue and could solve it by changing the siteUrl from http:// to https😕/

[kvreem]

@sid88in update I think I successfully submitted a PR for this issue #305