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

[kvreem]

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.

[kvreem]

Update: After several attempts I have now gotten this far,

Failed to load https://XXXX.execute-api.us-west-1.amazonaws.com/production/graphql: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://my-domain' is therefore not allowed access. The response had HTTP status code 502. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am not sure what else to do, here is my handler code:

exports.graphqlHandler = function graphqlHandler(event, context, callback) {
    function callbackFilter(error, output) {
        output.headers['Access-Control-Allow-Origin'] = '*';
        output.headers['Access-Control-Allow-Origin'] = true;
        output.headers['Content-Type'] = "application/json";
        callback(error, output);
    }

Any help is greatly appreciated.

[sid88in]

@kvreem what backend/frontend integration are you working with?

[kvreem]

@sid88in I am using the serverless-graphql boilerplate from around october. I am not sure why this is giving so much problems.

here is my app-backend/ serverless.yml

service: serverless-graphql-apollo

frameworkVersion: ">=1.21.0 <2.0.0"

provider:
  name: aws
  runtime: nodejs6.10
  stage: dev
  region: us-west-1
  environment:
    DATABASE_URL: ${env:MONGODB_URL}

plugins:
  - serverless-offline
  - serverless-webpack

custom:
  serverless-offline:
    port: 4000
    babelOptions:
      presets: ["es2015", "stage-2"]
  webpackIncludeModules: true

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

[sid88in]

@kvreem we have been changing/adding/enhancing backend/frontend integrations since October 2016.

1. I am not sure what backend integration you are using (appsync or simple dynamodb, RDS, Rest-API)? If you can point me to the code in master (link) I can understand which integration is not working for you.

2. In the above example I see mongob url. We have not tested any integration with mongodb. Are you creating a new backend integration or trying to run existing one?

3. When you deploy the code - is your graphQL endpoint working?

If you are not sure about the same, we can hop on a quick skype call sometime next week and go through the problems.

thanks
Sid

[kvreem]

@sid88in

1. It is a private repo for a personal project, with your permission I can add you to the repo. (I can also make it public for you, I am really desperate)
2. Mongo has been working fine locally, and lambda picks it up when I deploy, I believe that this is solely a cors/https/lambda issue.
3. No it is not at the moment, when I replace localhost:4000/ with my lambda url endpoint I get the current The response had HTTP status code 502. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. issue.

I would love to skype! If you are available now or anytime this week please call, kareemsskype is my id.

[sid88in]

ok please DM on @sidg_sid on twitter and we can set something up.

1. I would recommend you to create a PR in this repo and add MongoDB integrations. If that doesn't work please feel free to add me to your repo.

2. As I said, we have not tested MongoDB integrations remotely on AWS, so this repo currently doesn't support it. Please create a PR or open an issue to add this integration and it can be prioritized

3. Seems like your lambda function is the problem if graphql endpoint itself is not working. You can confirm the same using postman. You don't need to use apollo-client to make sure GraphQL endpoint is working, seems like the problem in your case is MongoDB/lambda integration.

[kvreem]

Okay let me go ahead and dm you right now! Lets get your eyes on the code. It should be very easy for you to run locally.

I will work on the PR as well but would like you to see it in action first.

[sid88in]

@kvreem just summarizing our conversation on skype.

1. You are using a new integration (mongodb) using managed mongodb service which you plan to contribute in this repo.

2. We debugged and found errors in your lambda implementation because postman gave 500.

Let us know your progress on the above. Looking forward.

thanks
Sid

[kvreem]

@sid88in would it be possible to help me triage this from the headers in chrome:

I really don't think its my database, do i need to somehow add headers to the request payload?

[sid88in]

would be great if you can create a PR and we can then debug together!

thanks
Sid

[kvreem]

@sid88in i have the code for the PR can you walk me through the process? I cloned the repo and created my own branch but I cannot push my branch to the repo.

[kvreem]

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

[gertst]

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