API javascript error

JavaScript
1

Hi, I’m working on the intermediate coding projects and I’m stuck on the first one. The problem I have is that everytime I make a request I get this error:

Failed to load https://labs.bible.org/api/?passage=random&type=json&callback=myCallBackFcn: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

Here’s my code:

var url = ‘https://labs.bible.org/api/?passage=random&type=json&callback=myCallBackFcn’;

var ourRequest = new XMLHttpRequest();

ourRequest.open(‘GET’, url);

ourRequest.onload = function(){
console.log(ourRequest.responseText);
};

ourRequest.send();

I know it has to do with cors but I cant figure out how to do it, I’ve tried other forums and they recommend using ajax, can someone help me with a simple example? I just want to display it on the console, I want to try to figure out the rest by myself but for now I just want to get the data to my page, thanks!!!

2

I forgot to mention that I’m trying to only use javascript for now, I will use jquery later

3

Unfortunately CORS requests are a combination of both the client and the server.

Therefore there just a few strategy you can try, but you still need the server on the other hand to be configured.

The easiest solution imho is to use a cors proxy that helps you, a couple of honorable mentions are:
cors.io
CORS-Heroku
https://corsproxy.github.io/