我试图获取一个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)
})
你需要将模式设置为no-cors,这个api才能工作:
fetch("https://api.deezer.com/chart", {
mode: 'no-cors'
});
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());
你必须明白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}`))
我犯了这个错误 无法加载XMLHttpRequesthttp://domain.com/canvas/include/rs-plugin/js/extensions/revolution.extension.video.min.js.飞行前响应中的访问控制允许标头不允许请求标头字段X-Requested-With。 我的php页面顶部有这两行代码,用于加载这个js文件。 但是问题依然存在,我该怎么
当我试图从另一个域访问rest服务时,我得到了以下错误 无法加载对飞行前请求的响应没有通过访问控制检查:请求的资源上没有“访问-控制-允许-起源”标头。因此,不允许访问源'http://localhost:8080'。 我将服务器端配置为响应跨域调用,这可以用于GET调用,但POST调用会产生错误 谢谢
CORS策略阻止从http://localhost:8000/api/product/http://localhost:3000获取数据:请求的资源上不存在访问控制允许来源标头。如果不透明的响应满足您的需求,请将请求的模式设置为no-cors,以在禁用CORS的情况下获取资源。
我已经创建了两个web应用程序--客户端和服务应用程序。 当客户端和服务应用程序部署在同一个Tomcat实例中时,它们之间的交互很好。 但是当应用程序部署到分开的Tomcat实例(不同的机器)时,当请求发送服务应用程序时,我会得到以下错误。 我的客户端应用程序使用JQuery、HTML5和bootstrap。
我试图向ERP API发出请求,得到以下响应: 访问位于“”的XMLHttpRequesthttp://ip:8082/auth“起源”http://connector.test'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在'access control Allow Origin'标头。 虽然在我的请求中有一个标题访问-控制-允许-起源: Cors.php JS/
我正在尝试使用以下两个库创建mollie付款: https://github.com/barryvdh/laravel-omnipay https://github.com/thephpleague/omnipay-mollie 当客户端填写表单并提交ajax请求时,将对我laravel应用程序中的一个函数进行请求。 在我的Laravel函数中,我尝试执行以下操作: 但我得到的回应是: XMLHt