Random Quote Machine Problems

I am having an issue with my random quote machine. I am trying to access an api of random quotes but i am getting an error. When I click my button to generate a new random quote it does not access the website it says blocked:mixed-content. Any help is appreciated.

https://codepen.io/twjordan93/pen/YpvoLb

The URL you’re getting your quotes from is insecure (HTTP) and your CodePen is being hosted securely (HTTPS). Fix with a CORS proxy like https://crossorigin.me/:

https://crossorigin.me/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1

Well it is not giving me my error after that but it is still not pulling the quote from the api. Do you know of any good tutorials I could look at to understand this a little better?

I made a tutorial in CodePen that challenges you to use the GitHub users API. It’s not so different - you need to make an AJAX call and process the results. The main difference is that the quote will be a single result while the users API returns an array. If you want to try it out, let me know if you have any questions or run into any problems.

This is the error im getting now in my console.

XMLHttpRequest cannot load https://crossorigin.me/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&_=1481508626993. The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, https://s.codepen.io’, but only one is allowed. Origin ‘https://s.codepen.io’ is therefore not allowed access.

I am definitely going to walk through this. Thank you