How to send HTTP request in netlify.app?

Support
, ,
#1

Hello, everyone! How are you?
I’ve built a simple React.js project and deployed it to netlify.com.
cardano-bean.netlify.app
I used the HTTP request at the app as follows.

image

It works well on my local browser (npm run start), but after deploying to netlify.com, it can’t send the request and receive any response.
I am not sure why I get this result.
Please help me.

#2

How are you making this call? Is this a Serverless Function or client-side code?

#3

@hrishikesh , thanks.
This is the client side call.(saga)

#4

How do I trigger this? Does it directly trigger when I load the page?

#5

No, it can be triggered when click the button.
Once I click the certain button, it trigger dispatch and calls above API.

#6

Okay, I’m assuming it’s the Buy now button you’re talking about.

So the error is, you’re connect to it over HTTP on a website with HTTPS. Browsers won’t allow that. This isn’t a Netlify limitation, it’s something not allowed by modern browsers. You would have to use HTTPS for that address.

1 Like
#7

Thanks, @hrishikesh .
So do you mean I can’t use HTTP request on my current browser?
And the solution is changing from HTTP to HTTPS, right?

#8

That’s correct @Anna. Your site is served over HTTPS and therefore resources called (e.g. scripts, stylesheets, images, etc.) need to use the same protocol otherwise you get errors such as this in the console

Mixed Content: The page at 'https://cardano-bean.netlify.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://159.89.188.76:3000/bean/redeem'. This request has been blocked; the content must be served over HTTPS.

The issue in your case then is that http://159.89.188.76:3000/ is not available over https (ie. https://159.89.188.76:3000) as it would appear it is not configured with SSL.

1 Like
#9

Thanks for your kindness. (@coelmay , @hrishikesh ).
Got it.
Hoping you are doing well! :slight_smile:

1 Like
#10

Hey Anna, probably too late for this but creating and configuring a _redirects file in the root of your build folder(or in your public folder if using an SPA like React) might help with this. For your example, in your case, the _redirects file would look something like this:

/api/* http://159.89.188.76:3000/:splat 200

Then rather than call endpoints like this:

fetch(`http://159.89.188.76:3000/bean/redeem?`)

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

fetch(`/api/bean/redeem?`) // 'it reads /api/ because of how we configured our _redirects file'

Hope this helps.

1 Like
#11

Thanks, this worked perfectly for me.