我尝试获取 API 请求，但返回此错误 Access to XMLHttpRequest at 'https://api.deezer.com/chart' from origin 'http://localhost:3000' 已被 CORS 策略阻止：否 ' Access-Control-Allow-Origin'标头存在于所请求的资源上。
the code
const {data, setData} = useState({});
const API = "https://api.deezer.com/chart";
useEffect(() => {
axios(API)
.then(response => {
setData(response);
console.log(data)
})
您必须了解 CORS 行为不是错误 - 它是一种按预期工作的机制，旨在保护您的用户、您或您正在调用的网站。检查这里的链接 https://medium.com/@baphemot/understanding-cors-18ad6b478e2b
您可以通过以下不同的方式使其发挥作用：
临时解决方案：
-
使用禁用 chrome 安全性
Windows：Windows + R --> chrome --disable-web-security --user-data-dir
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/lated?hl=en-GB 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}`))
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
