Trying to make API request - Getting Mixed Content error message

Glitch Help
1

Hello,

I am building a project using the p5.js library, along with p5.sound, p5.dom and p5.speech. I loaded all the library files into the Glitch project instead of accessing them through the web.

I am trying to access the Rhyme Brain API for a project. But I am getting this error message:

p5.js:5131 Mixed Content: The page at ‘https://rhyme-maker.glitch.me/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://rhymebrain.com/talk?function=getRhymes&word=now’. This request has been blocked; the content must be served over HTTPS.

It seems it has to do with the API site not being secure http. Does this mean I cannot access it via Glitch? Is there a way around this issue?

Thanks for your help.

I would provide a link to code but the error message already has two links and I can’t include more as a new user :man_shrugging:

2

That’s right - it looks like https isn’t provided by rhymebrain. To immediately get around this, you can access the http version of your project at http://rhyme-maker.glitch.me/ where the mixed-content issue won’t be a problem. Longer-term, you can request the data from rhymebrain on the server-side and provide it to the client-side yourself, so you can ensure it’s over https.

3

Great. This solution does work.

Longer-term, you can request the data from rhymebrain on the server-side and provide it to the client-side yourself, so you can ensure it’s over https.

Can you give me a bit of guidance as to how I would execute this request? Would this be in the form of a JSON file that I would load in the project? This is one of my first attempts working with an API, so I’m not well versed in all the details of how it works.

Thanks again.