Flickr api 不使用 React 和 Axios 获取图像答案

【问题标题】：Flickr api not fetching images using React and AxiosFlickr api 不使用 React 和 Axios 获取图像
【发布时间】：2017-02-16 21:27:16
【问题描述】：

我正在尝试从标签中获取图像列表，但没有任何内容被控制台记录或渲染。不确定我是否缺少 api 的参数。

编解码器：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)

【问题讨论】：

您是否在控制台中看到任何 CORS 警告？您是否尝试过控制台记录响应以查看返回的内容
我可以使用相同的代码并让它工作，但我必须使用这个插件：chrome.google.com/webstore/detail/allow-control-allow-origi/… 因为您正在使用客户端进行 api 调用，所以您需要确保您是允许跨域资源共享。浏览器通常不允许这样做，但它们是插件解决方法。最好的方法是让后端服务器发出请求，然后将其发送回前端，前端只与同源的后端通信
我已经安装了扩展。这是一个代码笔。还是没有骰子。 codepen.io/anon/pen/PWgBgd?editors=0010

标签： reactjs flickr axios

【解决方案1】：

发现了问题，除非你传入正确的东西，否则 Flickr 会用他们的 api 做一些奇怪的事情。将网址设置为：

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

【讨论】：

那不行了，检查codepen，控制台抛出Access-Control-Allow-Origin错误
@TomaszNowak 原始发帖人使用扩展来绕过 CORS，所以这个答案是针对他们的。您需要下载 chrome.google.com/webstore/detail/allow-control-allow-origi/… 之类的内容并将其打开以解决 CORS 问题，或者使用服务器向浏览器发送请求。

【解决方案2】：

您的 axios 调用失败：

.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)

【讨论】：

抱歉忘了说我安装了一个 cors chrome 扩展，这将允许交叉标题