Javascript API请求错误-否'；访问控制允许原点'；请求的资源上存在标头

我尝试获取一个API请求，但它在'https://api.deezer.com/chart“起源”http://localhost:3000'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头

代码

const {data, setData} = useState({});
    const API = "https://api.deezer.com/chart";
    useEffect(() => {
        axios(API)
        .then(response => {
            setData(response);
            console.log(data)

        }) 

---

您请求的资源拒绝提供响应，因为它不允许CORS（跨源资源共享），这意味着请求的服务器需要额外的头来提供对任何其他源请求的响应

---

请在您的请求头中提供一些附加凭据，如（API密钥），以从该API获取数据。

您需要将模式设置为“无cors”，此API才能工作：

fetch("https://api.deezer.com/chart", {
  mode: 'no-cors'
});

你需要像这样发送你的标题。也可以设置axios全局默认标题

在API方面，您需要激活CORS

// if it is node api
const cors = require('cors');
app.use(cors());

---

你必须明白CORS行为不是一个错误——它是一种按照预期工作的机制，以保护你的用户、你或你正在调用的站点

您可以通过以下不同方式使其工作：

临时解决方案：

使用禁用chrome安全性

Windows:Windows+R-->chrome--禁用web安全--用户数据目录

MacOS:open-na Google\Chrome--args--user data dir=/tmp/temporary Chrome profile dir--disable web security--disable站点隔离测试

添加和使用chrome扩展：

永久解决方案：

如果您没有访问api服务器的权限（我可以看到您没有），您可以从包装器服务器调用此api，它可以是任何服务器，例如：Node express服务器或Java服务器（添加基本节点服务器示例，只需调用/getCharts api，您将获得所需的结果）

const express=require（'express'））
const app=express（）
常数端口=3000
const axios=require（'axios'）；
app.get（'/getCharts'，（请求，res）=>{
常量API=”https://api.deezer.com/chart";
axios（API）
。然后（响应=>{
console.log（response.data）
res.json（response.data）
}).catch（错误=>{
res.send（'errr！！！'））
})
})
app.listen（端口，（）=>console.log（`Server running onhttp://localhost:${port}`）

这是同一个问题

// if it is node api
const cors = require('cors');
app.use(cors());