I am working on a simple react app, where I get a list of photos using the Flickr API.
export default class PhotoApp extends Component {
constructor(props) {
super(props);
this.state = {
photoList: []
}
}
componentDidMount() {
this.getPhotoList()
}
getPhotoList = () => {
console.log('ya got me!')
axios.get('https://api.flickr.com/services/feeds/photos_public.gne?tags=safe&format=json&nojsoncallback=true')
.then(response => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(response => {
console.log(response.data);
})
.catch((err) => {
console.log(err)
})
}
render() {
return (
<div className='appContainer'>
<h1>Welcome to my gallery!</h1>
<PhotoList />
</div>
);
}
}
The thing is, I get the CORS error when I try to get something and the following error is shown:
Access to XMLHttpRequest at 'https://api.flickr.com/services/feeds/photos_public.gne?tags=safe&format=json&nojsoncallback=true' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I can't get my head around this problem. Any help? Thanks!