How to hit open source api

Question

I am using react in which inside a component I have a button on which click I am running an API https://dog.ceo/api/breeds/list/all this one is from Dog.ceo to fetch all breeds of dogs, but every time I hit this url it says network error, I am totally fed up now don't know what is missing in my code

import React, { Component } from 'react'
import axios from 'axios'

 class Welcome extends Component {

    clickBtn(){

        axios.get(`https://dog.ceo/api/breeds/list/all`)
        .then((res)=>{
            debugger
            console.log(res)
        })
        .catch(err=>console.log(err))

    }

    render() {
        return (
            <div>
                <button
                onClick={this.clickBtn}
                className="btn btn-primary">Click</button>
            </div>
        )
    }
}
export default Welcome

This same code I am writing in code sandbox then it is returning correct responce then why in my code Do I need to bring Something In?

this is code sandbox

Do you understand what CORS is? Have you made any attempt to research the error message? You will not be able to get access to this resource via a cross-origin ajax request unless the remote API is changed to allow you to do so (e.g. some API providers have a registration procedure where you can register your site for permitted access, or maybe there is another way you can contact the maintainers). There's nothing obviously wrong with your code, it's just a standard security feature. Search online for "CORS" if you don't know anything about it. — ADyson, Jan 03 '20 at 17:15
Your product running on http and you want to fetch data from https ! you have to change your product to https or fetching from http — Babak Yaghoobi, Jan 03 '20 at 17:17
@ADyson yes I have passed `Access-Control-Allow-Origin` while passing link — , Jan 03 '20 at 17:18
P.S. a workaround for this is to send the AJAX request to your own server, and then have your server make another request to the API (so then the request going to the API is a standard HTTP request, not a cross-origin AJAX request, and so won't be blocked by the browser's policy). It's less efficient obviously, but it works around the security issue if it cannot be resolved with the API maintainer. — ADyson, Jan 03 '20 at 17:18
" I have passed Access-Control-Allow-Origin while passing link"...what do you mean exactly? That's a header which the remote server can include in its response if it wants to allow CORS requests (although it's usually not sufficient by itself, there are other steps required too). It's not something you control from the client side. I can't actually see where you have used it in your code anyway. But...if you have used it somewhere in your JavaScript code, it's meaningless, and attempting to use it on the request side demonstrates to me that you don't properly understand how CORS works. — ADyson, Jan 03 '20 at 17:19
Or...if you mean that this API is your own API which you have written, then yes you should be returning that header in your responses in order to enable CORS, but as I mentioned above, that is usually not the only step required in order to get it working. And you haven't said what value you passed for that header, either. But for instance you have to ensure that pre-flight OPTIONS request are supported, and that all the other HTTP methods you need are enabled. Research it more thoroughly and, if relevant, show us the server-side code you've written so far to try and enable it. — ADyson, Jan 03 '20 at 17:22
You don't need to bind the function on the onClick event? Try doing this: — Pedro Mutter, Jan 03 '20 at 17:35
Yeah... that's not your root problem now, but in the future, if you would try to use the keyword `this` inside the `clickBtn` function, you would face an error. — Pedro Mutter, Jan 03 '20 at 18:34

score 2 · Answer 1 · answered Jan 03 '20 at 17:17

2

You're "successfully" making a request on the api, however, it's being blocked because you're performing a cross origin request (you can look into what that means here). Basically, the API doesn't allow your website to perform a request from a diferent origin that the one it is published on.

A way to circumvent this would be for your website to make requests to an API of your own. Then your own API would make a request to the external API, and then return the response obtained back to your website.

answered Jan 03 '20 at 17:17

Ismael Padilla

5,246
4
23
35

How could I make call from backend to the given API, as axios is for frontend – Jan 03 '20 at 18:06
Indeed, axios is frontend. You would need to build a backend of your own to do something like that. So in the end, you would have the following chain of requests: `frontend (using axios)-> your new backend-> the API that you're interested in` – Ismael Padilla Jan 03 '20 at 18:07

score 0 · Answer 2 · answered Jan 03 '20 at 17:32

0

You are receiving a CORs error. It is a classic problem when you are using APIs from another domain. If you are the developer of this another API, you can add Access-Control-Allow-Origin: '*' header to the API response, if not you can develop an API on the same domain as your front-end that calls this third party API.

More about CORs here

answered Jan 03 '20 at 17:32

Pedro Mutter

1,178
1
13
18

How can I do that `develop API on the same domain` – Jan 03 '20 at 17:39
Ofc it is a workout as you are bypassing the cross-origin allowance, but you can develop an API and publish somewhere. If it is on the same domain of your front-end, you don't need to worry about the CORs, but if you publish on another place, the browser will still complain about the missing header and block the request. In the front-end, you call your API instead and In the routes that you exposed on the back-end, you call the third-party API and return the result to – Pedro Mutter Jan 03 '20 at 18:31

How to hit open source api

2 Answers2