How to use api with javascript and fetch function

Question

my question is the following I have the code:

 const url = 'http://localhost:8080/users/[count]';
 fetch(url)
.then((resp) => resp.json())
.then(function(data) {

for (i=o;i<data.length;i++) {
 document.getElementById("Result").innerHTML = `<p>${data[i].name} ${data[i].username}</p>`
};


})
.catch(function(error) {
console.log(JSON.stringify(error));
}); 

That in theory should grab the information in address http: // localhost: 8080 / users / [count] and give me the values name and username found in this address. The address has the following:

[{"name":"Marisa Koss","username":"Adolfo.Klein","email":"Arnold29@hotmail.com","address":{"street":"Nils Mills","suite":"Apt. 415","city":"South Cortney","zipcode":"96235-6649","geo":{"lat":"-6.3807","lng":"-19.6170"}},"phone":"1-212-309-5985 x3453","website":"dovie.com","company":{"name":"Muller, Monahan and Stracke","catchPhrase":"Managed real-time matrices","bs":"rich maximize portals"}},{"name":"Ole Kulas","username":"Lesly.Walter","email":"Etha70@gmail.com","address":{"street":"White Isle","suite":"Suite 966","city":"Hermannland","zipcode":"13688","geo":{"lat":"-85.1722","lng":"133.7227"}},"phone":"1-161-247-6455 x898","website":"gina.name","company":{"name":"Rodriguez - Botsford","catchPhrase":"Extended leading edge ability","bs":"wireless evolve web-readiness"}},{"name":"Baylee Boehm","username":"Maximillia37","email":"Merl.Rath24@yahoo.com","address":{"street":"Laisha Turnpike","suite":"Suite 277","city":"Cesartown","zipcode":"43786-5148","geo":{"lat":"3.6440","lng":"153.8556"}},"phone":"(027) 633-4660 x01161","website":"amari.org","company":{"name":"Wiegand and Sons","catchPhrase":"Advanced high-level open architecture","bs":"viral productize methodologies"}},{"name":"Chanelle Kub Jr.","username":"Mac.Stoltenberg10","email":"Willis_Gutkowski10@yahoo.com","address":{"street":"Cecilia Harbor","suite":"Suite 605","city":"East Deonte","zipcode":"11840-8930","geo":{"lat":"-18.2002","lng":"105.6944"}},"phone":"071-752-1969 x96946","website":"tristin.info","company":{"name":"Corwin - Champlin","catchPhrase":"Balanced bi-directional collaboration","bs":"sticky embrace interfaces"}},{"name":"Vickie Wisozk","username":"Ladarius.Conroy98","email":"Lowell_Beer@yahoo.com","address":{"street":"Cheyenne Village","suite":"Suite 849","city":"Farrellstad","zipcode":"67187","geo":{"lat":"4.3229","lng":"-125.2004"}},"phone":"1-247-291-1942 x5040","website":"doris.com","company":{"name":"Larson, Cormier and Stoltenberg","catchPhrase":"Profound discrete leverage","bs":"integrated benchmark ROI"}},{"name":"Laury Nader","username":"Eulalia62","email":"Lempi_Schimmel91@gmail.com","address":{"street":"Parker Junction","suite":"Apt. 389","city":"New Gabe","zipcode":"00367","geo":{"lat":"37.2142","lng":"79.3023"}},"phone":"(822) 093-1471 x9308","website":"junior.biz","company":{"name":"Hodkiewicz, Sporer and McClure","catchPhrase":"Inverse zero tolerance product","bs":"distributed generate solutions"}},{"name":"Laron Walker","username":"Rosalinda38","email":"Idella.Quigley72@yahoo.com","address":{"street":"Rodriguez Knoll","suite":"Suite 488","city":"New Zakaryhaven","zipcode":"24722","geo":{"lat":"-0.9863","lng":"63.8521"}},"phone":"229-380-2044 x086","website":"jaden.biz","company":{"name":"Klein Group","catchPhrase":"Balanced foreground moderator","bs":"user-centric redefine e-markets"}},{"name":"Antonia Wilkinson","username":"Verdie.Casper","email":"Candelario.Mann@yahoo.com","address":{"street":"Kuphal Harbor","suite":"Suite 661","city":"East Gregfurt","zipcode":"91590-9271","geo":{"lat":"-87.7308","lng":"25.9781"}},"phone":"307-166-2617","website":"marques.org","company":{"name":"Treutel LLC","catchPhrase":"Public-key discrete project","bs":"24/365 transform infomediaries"}},{"name":"Mr. Mateo Gottlieb","username":"Marina0","email":"Loyal.Weissnat49@gmail.com","address":{"street":"Connelly Throughway","suite":"Apt. 439","city":"Deionfort","zipcode":"49258","geo":{"lat":"-39.2334","lng":"177.2928"}},"phone":"763-148-7666 x4871","website":"roel.net","company":{"name":"Torp - Senger","catchPhrase":"Optional responsive complexity","bs":"viral strategize portals"}},{"name":"Hermann Wolff","username":"Mckayla.Anderson","email":"Guiseppe_Heidenreich@yahoo.com","address":{"street":"Justen Courts","suite":"Suite 217","city":"Lake Jovanburgh","zipcode":"52134-2599","geo":{"lat":"17.1201","lng":"106.4603"}},"phone":"650-449-3725 x0901","website":"heloise.net","company":{"name":"Marvin and Sons","catchPhrase":"Distributed didactic forecast","bs":"bleeding-edge reintermediate action-items"}}]

Could you tell me what my mistake is, or what should i do to get the data I need

When I check Dev Tools from chrome to see the error I get the following

Fetch API cannot load http://localhost:8080/users/[count] . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Answer 1

I solved the problem here is the documentation that explains how to avoid that problem:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend