I’d like to know why my code is not working. I’m very noob about API in JS. I’d like some help, if possible. Well, here I have my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clientes TINY</title>
</head>
<body>
<h1>Clientes</h1>
<ul id="clientes"></ul>
<script>
function createNode(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
const ul = document.getElementById('clientes');
const url = 'https://api.tiny.com.br/api2/contatos.pesquisa.php?token=[hidden_for_learningpurpose]&pesquisa=&formato=json';
fetch(url).then((resp) => resp.json())
.then /*[Yes, I need to build the <lis> here, but I know I still need make the code work until the lines before...]*/
.catch(function(error) {
console.log(error);
});
</script>
</body>
</html>
I’m having the following message on browser console:
“clientes.html:1 Access to fetch at ‘https://api.tiny.com.br/api2/contatos.pesquisa.php?token=%5C%5Bhidden%5C%5D&pesquisa=&formato=json’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”
and below:
Failed to load resource: net::ERR_FAILED
clientes.html:26 TypeError: Failed to fetch
at clientes.html:24:1
I expect by fetching the data and get it into the variable “resp”…for me to be able to handle it..
Here is the API documentation (if someone needs to check for something abou the API): https://tiny.com.br/api-docs/api
4