javascript - 如何打开源api

Question

这个问题已经有答案了:

How does the 'Access-Control-Allow-Origin' header work? (19 个回答)

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API (30 个回答)

已关闭 3 年前。

我正在使用 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

我在代码沙箱中编写的相同代码然后它返回正确的响应那么为什么在我的代码中我需要引入一些东西？

this is code sandbox

Answer 1

您“成功”在 api 上发出请求，但是，它被阻止，因为您正在执行跨源请求(您可以查看这意味着 here )。基本上，该 API 不允许您的网站执行来自与其发布来源不同的来源的请求。

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