英文:
How to hit open source api
问题
我正在使用React，其中在一个组件内部有一个按钮，点击该按钮后我正在运行一个API https://dog.ceo/api/breeds/list/all，这个API来自 Dog.ceo，用于获取所有狗的品种，但每次我访问这个URL时都会显示网络错误，我已经非常烦恼了，不知道我的代码缺少什么。
以下是您提供的代码的翻译部分：
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
我将不会回答翻译问题或提供额外的内容。
英文:
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?
答案1
得分: 2
你正在“成功地”对 API 发出请求，但由于你正在执行跨源请求，它被阻止了（你可以在这里了解这是什么意思）。基本上，API 不允许你的网站从与其发布源不同的源执行请求。
一个绕过这个问题的方法是让你的网站对自己的 API 发出请求。然后你自己的 API 会对外部 API 发出请求，然后将获得的响应返回到你的网站。
英文:
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.
答案2
得分: 0
您遇到了一个CORS错误。这是在您使用来自另一个域的API时经常出现的问题。如果您是另一个API的开发者，您可以在API响应中添加Access-Control-Allow-Origin: '*'头部，如果不是，您可以在与前端相同的域上开发一个调用这个第三方API的API。
有关CORS的更多信息请参阅这里。
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论