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

Ember Data
1

Hey there! I’m trying to pull data from an API that I have already enabled CORS. It’s enabled to all endpoints. But when I try to pull data I’m getting this error:

Mixed Content: The page at 'https://cootrandesenv.tjdft.jus.br/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://cootrandesenv-api.tjdft.jus.br/api/v1.0/contratos/'. This request has been blocked; the content must be served over HTTPS.

I have the contentSecurityPolicy set like this:

contentSecurityPolicy: {
  'default-src': "'none'",
  'script-src': "'self' 'unsafe-eval' *.googleapis.com maps.gstatic.com",
  'font-src': "'self' fonts.gstatic.com",
  'connect-src': "'self' maps.gstatic.com",
  'img-src': "'self' *.googleapis.com maps.gstatic.com csi.gstatic.com",
  'style-src': "'self' 'unsafe-inline' fonts.googleapis.com maps.gstatic.com"
},

And I have the ENV.APP.api set like this:

if (environment === 'development') {
    ENV.APP.api = 'https://cootrandesenv-api.tjdft.jus.br';
}

if (deployTarget === 'desenv') {
    ENV.APP.api = 'https://cootrandesenv-api.tjdft.jus.br';
}

if (deployTarget === 'homolog') {
    ENV.APP.api = 'https://cootranhomolog-api.tjdft.jus.br';
}

if (deployTarget === 'prod') {
    ENV.APP.api = 'https://cootran-api.tjdft.jus.br';
}

if (environment === 'test') {
    ENV.APP.api = 'https://cootrandesenv-api.tjdft.jus.br';
    // Testem prefers this...
    ENV.locationType = 'none';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
}

And my adapter looks like this:

//app/adapters/application.js
import DS from 'ember-data';
import Ember from 'ember';
import ENV from '../config/environment';
import {
  pluralize
} from 'ember-inflector';

export default DS.JSONAPIAdapter.extend({
  host: ENV.APP.api,
  namespace: ENV.APP.names
});

Here’s the API response’s headers when I access this through the browser:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Allow-Origin:*
Content-Length:13780
Content-Type:application/vnd.api+json
Date:Mon, 13 Nov 2017 19:54:31 GMT
Server:nginx/1.6.2

But here’s what’s happening with the Ember app:

Selection_023
Selection_0231327×124 19.5 KB

The first request seems correct but then it’s canceled. I think that’s all set to use https but I’m still getting these erros. Does somebody knows what I’m missing here? Thank you!

2

Hmm strange. I don’t think this is a content policy issue.

Even though you’ve set ENV.APP.api to https:// in the config, it seems to still be making a call to http://cootrandesenv-api.tjdft.jus.br/api/v1.0/contratos/.

What is the code that makes that call? I’m curious if it’s using ember-data?

3

It’s from the index route and It’s using ember-data:

import Ember from 'ember';
import formatMoney from "accounting/format-money"

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('contrato');
  },

  setupController(controller, model) {
    this._super(controller, model);
    this.get('store').findAll('contrato').then((contratos) => {
      let total = contratos.reduce((a, b) => {
        return a + b.get("value");
      }, 0);
      this.controllerFor('index').set('totalSum', formatMoney(total, "R$", 2, ".", ","));
    });
  },

});

It’s really weird and I’m still lost trying to solve it. Does it have something to do with nginx? Here’s the nginx.conf file:

user nginx;
worker_processes 1;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events
{
  worker_connections 1024;
}

http
{
  include /etc/nginx/mime.types;
  default_type application/octet-stream;
  sendfile on;
  access_log /var/log/nginx/access.log;
  keepalive_timeout 3000;
  server
  {
    listen 80;
    root /app;
    client_max_body_size 32m;

    location /
    {
      try_files $uri /index.html;
    }
  }
}
4

Hmm strange. It’s not related to nginx because the call is being made by ember-data with http. Would you mind clicking on the second request in your screenshot and taking screenshots of the request/response tabs?

My question is: "Why is ember data using http to make the request when you specifically have devined ENV.APP.api to use https.

5

It may shed light on the issue by throwing in a direct Ajax call to the endpoint and seeing what flows.

6

Here’s the first request:

Selection_024
Selection_0241354×197 39.8 KB

And here’s the second request:

Selection_025
Selection_0251103×167 27 KB

The response are the same: Failed to load response data.

When I try to access the same link through the browser I get this:

Selection_027
Selection_0271637×399 93.5 KB

And the response is the correct data content.

7

I’ve tried a direct Ajax call like this:

import Ember from 'ember';
import formatMoney from "accounting/format-money"

export default Ember.Route.extend({
  model() {
    Ember.$.get('https://cootrandesenv-api.tjdft.jus.br/api/v1.0/contratos/').then((response) => {
      debugger;
      console.log(response);
    });

    return this.get('store').findAll('contrato');
  },

});

And I’m getting the correct response:

Selection_028
Selection_0281334×451 101 KB

I have no idea about what could be wrong here. =/

8

Does this model have an adapter?

9

Nope! It’s only the application.js adapter:

import DS from 'ember-data';
import Ember from 'ember';
import ENV from '../config/environment';
import {
  pluralize
} from 'ember-inflector';

export default DS.JSONAPIAdapter.extend({
  host: ENV.APP.api,
  namespace: ENV.APP.namespace,
});
10

Just solved it and I can’t believe that It took so much time!

I was trying to debug it on my machine pointing to the https://cootrandesenv-api.tjdft.jus.br/api/v1.0/contratos/. Doing this I’ve noticed that It was getting a 301 code. That was the key to solve it! I’ve just changed all the API’s endpoints to remove all the backslashes. Now it’s calling https://cootrandesenv-api.tjdft.jus.br/api/v1.0/contratos whithout the backslash and everything is fine.

Thank you for your help, guys! =D

11

Coolio. I am glad you found it.