如何使用api与javascript和fetch功能

时间:2017-02-03 00:13:35

标签: javascript html api fetch

我的问题是以下我有代码:

 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));
}); 

理论上应该获取地址http:// localhost:8080 / users / [count]中的信息,并给我在此地址中找到的值名称和用户名。 地址如下:

[{"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"}}]

你能告诉我我的错误是什么,或者我应该怎么做以获得我需要的数据

当我从chrome检查Dev Tools以查看错误时,我得到以下内容

Fetch API无法加载http://localhost:8080/users/[count]。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://localhost:3000”访问。如果不透明响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用CORS的资源。

1 个答案:

答案 0 :(得分:0)