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獲取圖像

回答

相關問題