Javascript 如何使用开源api

我使用的是react，在组件中，我有一个按钮，在该按钮上单击我正在运行API

https://dog.ceo/api/breeds/list/all

这是来自

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

import React，{Component}来自“React”
从“axios”导入axios
类欢迎扩展组件{
单击BTN（）{
axios.get(`https://dog.ceo/api/breeds/list/all`)
。然后（（res）=>{
调试器
console.log（res）
})
.catch（err=>console.log（err））
}
render（）{
返回(
点击
)
}
}
导出默认欢迎

我在代码沙盒中编写的代码，然后返回正确的响应那么为什么我的代码中需要引入一些内容

您正在“成功”对api发出请求，但由于您正在执行跨源请求，请求被阻止（您可以了解这意味着什么）。基本上，API不允许您的网站执行来自发布它的不同来源的请求

规避这种情况的一种方法是，您的网站向自己的API发出请求。然后，您自己的API将向外部API发出请求，然后将获得的响应返回到您的网站

您正在“成功”对api发出请求，但是，它被阻止，因为您正在执行跨源请求（您可以了解这意味着什么）。基本上，API不允许您的网站执行来自发布它的不同来源的请求

---

规避这种情况的一种方法是，您的网站向自己的API发出请求。然后，您自己的API将向外部API发出请求，然后将获得的响应返回到您的网站

您收到一个CORs错误。当您使用来自另一个域的API时，这是一个典型的问题。如果您是另一个API的开发人员，可以将

Access Control Allow Origin:'*'

头添加到API响应中，如果不是，则可以在与调用此第三方API的前端相同的域上开发API

---

有关CORs的详细信息

您收到CORs错误。当您使用来自另一个域的API时，这是一个典型的问题。如果您是另一个API的开发人员，可以将

Access Control Allow Origin:'*'

头添加到API响应中，如果不是，则可以在与调用此第三方API的前端相同的域上开发API

---

关于CORs的更多信息

您了解什么是CORs吗？您是否尝试过研究错误消息？您将无法通过跨源ajax请求访问此资源，除非更改远程API以允许您这样做（例如，某些API提供商有注册程序，您可以注册站点以获得允许的访问，或者您可以通过其他方式联系维护者）。你的代码没有明显的错误，它只是一个标准的安全特性。如果您对“CORS”一无所知，请在线搜索它。您的产品运行在http上，您希望从https获取数据！您必须将产品更改为https或从http@ADyson是，我在通过linkP.S时通过了

访问控制允许原点

。解决方法是将AJAX请求发送到您自己的服务器，然后让您的服务器向API发出另一个请求（因此，发送到API的请求是标准HTTP请求，而不是跨源AJAX请求，因此不会被浏览器的策略阻止）。显然，它的效率较低，但如果API维护人员无法解决安全问题，它可以解决这个问题。“我在传递链接的同时传递了Access Control Allow Origin”…你的确切意思是什么？如果远程服务器希望允许CORS请求，则可以在其响应中包含该头（虽然它本身通常不够，但还需要其他步骤）。这不是你从客户端控制的东西。我实际上看不出您在代码中使用了它。但是……如果您在JavaScript代码中使用过它，那么它就毫无意义，而尝试在请求端使用它向我表明您并不完全理解CORS是如何工作的。您理解CORS是什么吗？您是否尝试过研究错误消息？您将无法通过跨源ajax请求访问此资源，除非更改远程API以允许您这样做（例如，某些API提供商有注册程序，您可以注册站点以获得允许的访问，或者您可以通过其他方式联系维护者）。你的代码没有明显的错误，它只是一个标准的安全特性。如果您对“CORS”一无所知，请在线搜索它。您的产品运行在http上，您希望从https获取数据！您必须将产品更改为https或从http@ADyson是，我在通过linkP.S时通过了

访问控制允许原点

。解决方法是将AJAX请求发送到您自己的服务器，然后让您的服务器向API发出另一个请求（因此，发送到API的请求是标准HTTP请求，而不是跨源AJAX请求，因此不会被浏览器的策略阻止）。显然，它的效率较低，但如果API维护人员无法解决安全问题，它可以解决这个问题。“我在传递链接的同时传递了Access Control Allow Origin”…你的确切意思是什么？如果远程服务器希望允许CORS请求，则可以在其响应中包含该头（虽然它本身通常不够，但还需要其他步骤）。这不是你从客户端控制的东西。我不会演戏