0

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!

RCohen
  • 1,702
  • 10
  • 24
  • 44

0 Answers0