我正在尝试从一个API获取数据。但是当我在浏览器上直接使用失眠症时,它是可以的。
当我在代码中使用axios时,我遇到了这个错误:阻止多来源请求(跨来源请求):"同源"策略不允许查询远程资源....
我的代码
const axiosInstance = axios.create({
baseURL : 'https://trefle.io/api/v1/plants?token=********',
mode: 'no-cors',
withCredentials: false,
credentials: 'same-origin',
headers : {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
}
})
async getPlantsList(context)
{
try{
const response = await axiosInstance.get();
console.log('2', response.data);
} catch(error){
console.log('error', error);
}
}
我需要帮助,我在网上搜索,但我没有找到解决方案。
谢谢你的帮助
在axios示例中添加标题
3条答案
按热度按时间ztyzrc3y1#
几个问题:
Access-Control-Allow-Origin
header在您的 * request * 中没有位置,因为它是一个 * response * 报头。1.如果你想让你的客户端访问响应,你不能使用
no-cors
模式,你必须使用cors
模式(这是跨源请求的默认模式)。1.因为所讨论的资源似乎不允许任何请求头文件,除了 * CORS安全列表的请求头文件 *,您将无法在请求中包含
Content-Type
头文件。但请注意,所讨论的请求是GET
,对于它来说,包含Content-Type
头文件是没有意义的。因为GET
请求并不意味着有一个主体,所以只需从请求中删除该标头即可。如果你解决了所有三个问题,它应该工作。
cl25kdpy2#
不需要设置
cors
选项我将通过axios调用显示两个选项。两者的结果相同
选项1:使用create()
选项2:不创建()
结果1
结果二
o0lyfsai3#
有人能花点时间解释一下为什么我的代码不起作用吗?