Question

我尝试获取一个API请求，但它正在恢复该错误从源'http：// localhost：3000'到'https://api.deezer.com/chart'的XMLHttpRequest访问已被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)

        })

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

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)

        })

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

在API方面，您需要激活CORS

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

Answer 3

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

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

Answer 4

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

请在请求标头中提供诸如（API密钥）之类的其他凭据，以从该API提取数据。

API请求错误-请求的资源上没有“ Access-Control-Allow-Origin”标头

4 个答案: