Requesting an HTTP resource from HTTPS Website

Support
1

I have an HTTPS Gatsby site at https://nervous-stonebraker-07cdb0.netlify.com/
I am trying to fire an XHR request to grab bus schedule data from my city’s public bus schedule API. That API is hosted with HTTP.

In various browsers, I am receiving errors:

Chrome: Mixed Content: The page at ‘’ was loaded over HTTPS, but requested an insecure resource ‘’. This request has been blocked; the content must be served over HTTPS.

Firefox: Blocked loading mixed active content…

Is there anything I can do on my side? Can I opt to request HTTP content?

2

Hey @wesspacito,

There’s an interesting discussion at the end of this topic which you may wish to explore in order to serve the call in a seemingly secure manner.

2 Likes
3

Yea, the solution mentioned there is probably the only way to do that. :+1:

4

@Scott Thank you!

@Dennis Thanks for checking in! A lot of the example _redirects involve an internal backend. I’m having difficulty making this approach work for my use case with an external resource. My project is a one-page Gatsby app, the only page I care about is home “/”. The http resource is “http://webservices.nextbus.com/service/publicJSONFeed?…”

I’ve tried many iterations of:

/* http://webservices.nextbus.com/service/* 200!

What should the _redirect syntax for this look like?

5

That redirect rule is not quite right. You can use an * in the ‘to’ section of the rule. Perhaps the following works for you:

/* http://webservices.nextbus.com/service/:splat 200

Let me know if that helps.

6

Hey Dennis, Not meaning to hijack this post but I am having a very similar issue with a react project/quote api and I am having no luck, I have tried many different things but nothing has panned out so far. Wondering if the OP ever had his issue resolved.

7

Hi, @williycole. It would help us to know what you tried and what the results were. Also, a link to the site where the redirects are not working (or the API ID for the site if you don’t want to share it publicly) would allow our support team to take a look at the actual site to see why it isn’t working.

Would you please send us that information?

8

@Dennis I built a simple one page pure JS app to convert currencies. I am using the API
http://api.exchangeratesapi.io/v1/latest . Its hosted on https://currencyconvertor-bg.netlify.app/. I also get the same error.

The API can be accessed only with an access key. So I have to fetch
http://api.exchangeratesapi.io/v1/latest?access_key=02d91e97b9cbb8b598c5e284cedeb705

I created a _redirects file in the main folder and wrote this /* http://api.exchangeratesapi.io/v1/ :splat 200! Still,the same error persists.

What is the problem here?Could you please help?

9

Hi @balajiganesh

The option given in the above thread is

/api/* http://endpoint.com/api/:splat 200!

which would mean instead of using something like

const response = await fetch('http://api.exchangeratesapi.io/v1/')

you would use

const response = await fetch('/api/')

You can find more information about proxying to other services in the Rewrites and proxies docs.

1 Like
10

Hey Luke, I am currently experiencing a problem similar to this. I’m trying to build a React project with an external API. the _redirects file in my public folder is shown below:

/* http://api.mediastack.com/v1/news?:splat 200

still getting the same mixed content error when deployed. what do you suggest I try?

EDIT

After an hour, figured out I was doing it the wrong way. Posting this in case anybody else needs it.

First off, after a little tweaking, I realised that the way i was trying to configure my _redirects file was wrong. Just like what some solutions examples above suggest, it should look something like this:

/api/* http://api.mediastack.com/v1/:splat 200

However, what some examples failed to state is that rather than making API calls the usual way with fetch or axios as below:

axios.get(`http://api.mediastack.com/v1/news?access_key=ACCESS_KEY&.....`)

You would need to make your API calls in this format:

axios.get(`/api/news?access_key=ACCESS_KEY&.....`) // 'it reads /api/ because of how we configured our _redirects file'

Hope this helps.

1 Like
11

I am still getting a 404 error after trying the steps listed above.

Here is what I tried:

I put this in my _redirects file:

/api/* http://137.184.159.7/api/:splat 200!

I made my API call in this format:

axios.post(api/user/login)

This is the new API endpoint url showing in my console:
https://rapidpace.netlify.app/api/user/login

12

I can see you’re getting a 401 not 404.

image
image890×152 14.4 KB

Have you changed something?