【发布时间】：2020-04-22 06:07:43
【问题描述】：
我正在使用 react 在组件内部我有一个按钮，单击该按钮我正在运行一个 API https://dog.ceo/api/breeds/list/all 这个来自 Dog.ceo 以获取所有品种的狗，但每次我点击这个网址时都会显示网络错误，我现在完全受够了，不知道我的代码中缺少什么
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
我在代码沙箱中编写的相同代码然后它返回正确的响应那么为什么我需要在我的代码中引入一些东西？
【问题讨论】：
-
你了解 CORS 是什么吗？您是否尝试过研究错误消息？您将无法通过跨域 ajax 请求访问此资源，除非更改远程 API 以允许您这样做（例如，某些 API 提供程序有一个注册程序，您可以在其中注册您的站点以获得允许的访问权限，或者也许还有另一种方式可以联系维护者）。您的代码没有明显的问题，它只是一个标准的安全功能。如果您对此一无所知，请在线搜索“CORS”。
-
您的产品在 http 上运行并且您想从 https 获取数据！您必须将产品更改为 https 或从 http 获取
-
@ADyson 是的，我在传递链接时通过了
Access-Control-Allow-Origin -
P.S.解决方法是将 AJAX 请求发送到您自己的服务器，然后让您的服务器向 API 发出另一个请求（因此，发送到 API 的请求是标准 HTTP 请求，而不是跨域 AJAX 请求，并且所以不会被浏览器的政策阻止）。显然它的效率较低，但如果 API 维护者无法解决它，它可以解决安全问题。
-
"我在传递链接时通过了 Access-Control-Allow-Origin"...你到底是什么意思？这是一个标头，如果远程服务器想要允许 CORS 请求，它可以包含在其响应中（尽管它本身通常还不够，还需要其他步骤）。这不是您从客户端控制的东西。无论如何，我实际上无法看到您在代码中使用它的位置。但是...如果您在 JavaScript 代码中的某个地方使用过它，那它就毫无意义，并且尝试在请求端使用它向我表明您没有正确理解 CORS 的工作原理。
标签： javascript reactjs cors axios