API 请求错误 - 请求的资源上不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：API request error - No 'Access-Control-Allow-Origin' header is present on the requested resourceAPI 请求错误 - 请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2020-11-08 18:30:00
【问题描述】：

我尝试获取 API 请求，但它正在返回此错误 Access to XMLHttpRequest at 'https://api.deezer.com/chart' from origin 'http://localhost:3000' has been blocked by CORS policy : 请求的资源上不存在“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)

        })

【问题讨论】：

stackoverflow.com/questions/43871637/… 这是同一个问题

标签： javascript reactjs api axios react-hooks

【解决方案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}`))

【讨论】：

【解决方案2】：

您请求的资源拒绝提供响应，因为它不允许 CORS(Cross Origin Resource Sharing)，这意味着请求的服务器需要额外的标头来提供对任何其他的响应源的请求。

请在您的请求标头中提供一些额外的凭据，例如 （API 密钥），以便从该 API 获取数据。

【讨论】：

【解决方案3】：

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)

        })

您需要像这样发送标题。或者可以设置axios全局默认headeraxios default header

在 API 方面，您需要激活 CORS

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

【讨论】：

【解决方案4】：

您需要将模式设置为“no-cors”才能使此 api 工作：

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

【讨论】：