API请求错误-请求的资源上没有访问-控制-允许-起源头

Question

我试图获取一个API请求，但它正在返回此错误访问XMLHttpRequest at'https://api.deezer.com/chart'从起源'http://localhost:3000'已被CORS策略阻止：没有'访问-控制-允许-起源'标头存在于请求的资源。

密码

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

        }) 

Answer 1

你需要将模式设置为no-cors，这个api才能工作：

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

Answer 2

const url = "https://api.deezer.com/chart";
const config = {
   url,
   headers: {
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
    }
}


const {data, setData} = useState({});
    
    useEffect(() => {
        axios(config)
        .then(response => {
            setData(response);
            console.log(data)

        })
   }  //closing bracket required
); //closing bracket required

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

在API方面，你需要激活CORS

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

Answer 3

你必须明白CORS的行为不是一个错误——它是一种按照预期工作的机制，以保护你的用户、你或你正在呼叫的网站。点击这里的链接

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

临时解决方案：

>

禁用chrome安全

Windows:Windows R--

MacOS:open-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-国标

永久解决方案：

如果你没有访问api服务器，我可以看到你没有，你可以从包装服务器调用这个API，它可以是任何服务器，例如：节点快递服务器或Java服务器（添加基本节点服务器示例，只需调用 /getChartsapi，你会得到你想要的结果）

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}`))