javascript - API 请求错误 - 请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

我尝试获取 API 请求，但它正在返回此错误 Access to XMLHttpRequest at 'https://api.deezer.com/chart' from origin 'http://localhost:3000' has been blocked by CORS policy: No' Access-Control-Allow-Origin' header 出现在请求的资源上。
编码

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

        }) 

Answer 1

您必须了解 CORS 行为不是错误——它是一种按预期工作的机制，以保护您的用户、您或您正在调用的站点。 Check Link here
您可以通过以下不同方式使其工作:
临时解决方案:

使用禁用 chrome 安全性
Windows:Windows + R --> chrome --disable-web-security --user-data-dir
MacOS:打开 -na Google\Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials

添加和使用 chrome 扩展:
https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en-GB

永久解决方案:
如果您无权访问我可以看到您没有的 api 服务器，您可以从包装服务器调用此 API，它可以是任何服务器，例如:Node-express 服务器或 Java 服务器(添加基本节点服务器示例只需调用/getCharts api，你就会得到你想要的结果)

const express = require('express')
const app = express()
const port = 3000
const axios = require('axios');

app.get('/getCharts', (req, res) => {
  const API = "https://api.deezer.com/chart";
  axios(API)
    .then(response => {
      console.log(response.data)
      res.json(response.data)
    }).catch(err => {
      res.send('errr!!!')
    })
})

app.listen(port, () => console.log(`Server running on http://localhost:${port}`))