HTTPS endpoint request returns as Mixed Content HTTP

Question

I am having issues returning API data from a GET request for a secure HTTPS Strava API endpoint. I use the following jQuery request:

$.get(`https://strava.com/api/v3/athletes/249995/activities?access_token=[access token here]/`, function(data, status) {
  console.log(data[0].name);
}, 'json');

I expect the data to be returned, but instead I'm getting a Mixed Content error:

Mixed Content: The page at 'https://mitchellgsides.github.io/Strava-PR-Lister/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.strava.com/api/v3/athletes/249995/activities?access_token=[access token here]'. This request has been blocked; the content must be served over HTTPS.

I can follow the exact requested link:

https://strava.com/api/v3/athletes/{id}/activities?access_token={accesstoken}/

with no issues, and the result shows as a secure HTTPS with what I want, but my app won't load the content. How can I get rid of the mixed content error, when that error shouldn't apply because the content IS served over HTTPS?

It looks like Strava are redirecting your HTTPS request to a HTTP URL, as such there's nothing you can do about the warning. Either that or you have a typo in your URL somewhere and you're not actually sending the HTTPS request as you believe you are — Rory McCrossan

Mitchell Sides Mitchell Sides · Accepted Answer · 2019-02-13T17:29:54

I've solved it! Since I didn't specify 'www.' in my request, the request was redirected as HTTP. In order to avoid redirection, I've made the request identical, like this:

https://www.strava.com/...

instead of

https://strava.com/...

HTTPS endpoint request returns as Mixed Content HTTP

1 Answers