Flickr API不使用React和Axios获取图像

我想从标签中获取图像列表，但没有任何东西正在被控制台记录或渲染出来。不知道如果我缺少api参数。Flickr API不使用React和Axios获取图像

CODEPEN：http://codepen.io/anon/pen/PWgBgd?editors=0010

const url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json" 

class App extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     items: [] 
    } 
    } 

    componentWillMount() { 
    axios.get(url) 
     .then((response) => { 
     console.log(response.data.jsonFlickrFeed.items); 
      this.setState({ 
       items: response.data.jsonFlickrFeed.items 
      }) 
     }) 
     .catch((err) => { 
     }) 
    } 

    render() { 
     const mappedStorage = this.state.items.map((item) => <li>{item.media.m} </li>) 

    return (
     <div> 
     hello 
       <ul>{mappedStorage}</ul> 
     </div> 
    ); 
    } 

} 

ReactDOM.render(<App />, document.body)

来源

2017-02-16 user992731

您是否在控制台中看到任何CORS警告？你有没有试过控制台日志记录响应，看看返回什么 – finalfreq

我能够使用这个相同的代码，并得到它的工作，但我不得不使用这个插件：https：//chrome.google.com/webstore/detail/allow-control -allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi？hl = zh由于您使用客户端进行api调用，因此您需要确保允许跨源资源共享。浏览器通常不允许这样做，但它们是插件。最好的方法是让后端服务器发出请求，然后将其发送回前端，前端只与后端相同的来源 – finalfreq

我已经安装了扩展。这是一个codepen。仍然没有骰子。 http://codepen.io/anon/pen/PWgBgd?editors=0010 – user992731

发现问题，Flickr的做一些奇怪的东西与他们的API，除非你在正确的东西通过。该URL设置为：

http://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true

，然后更新代码是

axios.get("https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true") 
    .then((response) => { 
    console.log(response.data.items); 
    this.setState({ 
     items: response.data.items 
    }) 
    }) 
    .catch((err) => { 
    console.log(err) 
    })

似乎更主要的是，如果你不加nojsoncallback=true它们返回的JSON是一个回调函数，而不是可解析通常情况下，幸运的是，他们会给你一个参数来返回你想要的。

工作笔http://codepen.io/finalfreq/pen/WRWgPw?editors=0011

来源

2017-02-16 22:14:20 finalfreq

坚实！谢谢 – user992731

这不工作了，检查codepen，控制台抛出访问控制 - 允许 - 来源错误 –

@TomaszNowak原来的海报是使用扩展来解决CORS，所以这个答案是针对他们。您需要下载https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en之类的内容，并打开它以解决CORS问题，或者使用一个发送请求和浏览器的服务器。 – finalfreq

你爱可信调用失败：

.catch((err) => { 
     debugger; 
      console.log(err); 
    }) 

Error: Network Error 
    at e.exports (VM970 axios.min.js:2) 
    at XMLHttpRequest.l.onerror (VM970 axios.min.js:2)

来源

2017-02-16 21:43:39

对不起，忘了提及我已经安装了一个cors chrome扩展，这将允许交叉标题 – user992731

Flickr API不使用React和Axios获取图像

回答

相关问题