Vanilla Javascript API call to randommer.io

Question

I am new to Javascript and I am trying to make an API call to randommer.io using Vanilla Javascript, but it not working. I have read the documentation on Randommer but nothing same to work. I keep getting the Cross-Origin Request Blocked error. Any help how to solve this problem. Below is the code I am using to make the API call and and X-Api-Key is also valid.

 window.addEventListener('DOMContentLoaded', function () { getData() }) const getData = async function() { const result = await fetch(`https://randommer.io/api/Phone/Countries`, { method: 'GET', headers: { "Access-Control-Allow-Origin": '*', Accept: 'application/json', 'x-Api-Key': 'xxxxxx', } }) const data = await result.json() console.log(data) }

Answer 1

You could try using the cors-anywhere proxy which you could also setup yourself.

window.addEventListener('DOMContentLoaded', function () {
getData()
})



const getData = async function() {
    const result = await fetch(`https://cors-anywhere.herokuapp.com/https://randommer.io/api/Phone/Countries`, {
        method: 'GET',
        headers: {
        "Access-Control-Allow-Origin": '*',
        Accept: 'application/json',
        'x-Api-Key': 'XXXX',
        }
    })
    const data = await result.json()
    console.log(data)
}

https://github.com/Rob--W/cors-anywhere

This is happening because you really should be running this server side via something like Node.js since they don't allow cors but this is a workaround if you want to run it like you are.

Answer 2

Your server must accept cors, otherwise this call will not work. What you can do is create a proxy as suggested to bypass its restriction.