gpt4 book ai didi

javascript - 正在获取 API json 数据警报 : Content Security Policy: The page’s settings blocked the loading of a resource at

转载 作者:行者123 更新时间:2023-12-01 21:56:34 24 4
gpt4 key购买 nike

我一直在玩 this API link这让我可以找到经纬度格式的地址之间的旅行持续时间。当我将此链接粘贴到我的浏览器时,我得到一个 json 对象,因此“它正在工作”(没有凭据等)。

当我想从 API 获取数据时,挑战就出现了:

fetch('http://router.project-osrm.org/trip/v1/driving/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?overview=false')
.then(response => {
return response.json()
})
.then(data => {
// Work with JSON data here
console.log(data)
})
.catch(err => {
// Do something for an error here
})

我在 firefox 控制台中收到此错误消息:

Content Security Policy: The page’s settings blocked the loading of a resource at http://router.project-osrm.org/trip/v1/driving/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?overview=false (“connect-src”).

在尝试了多种不同的方法后,我终于放弃了,来到这里寻求帮助。因此,有人可以向我解释一下请求有什么问题吗?另外,为什么当我粘贴到我的浏览器上时它可以工作,但当我通过获取时却不能?还有一个,我意识到我在这个问题中 chop 的发布代码返回了我想要接收的数据。为什么在这种情况下它有效?

提前致谢

最佳答案

失败是因为Ccontent S安全P策略或 CSP,它正在为 connect-src 执行策略。 ,它限制了你可以连接到 WebSockets、EventSource 和 XHR 的域(这是 fetch() 实现的)。您看到的错误正是这样说的,尽管可能不是以最清晰易读的方式。

的意思是,在您尝试运行此代码的页面上,有一个 <meta http-equiv="Content-Security-Policy" content="..."><head> 中的某处标记,或者获取页面的请求有一个 Content-Security-Policy header 。此外,实际的 CSP 字符串将有一个 connect-src。其中的值,或设置 connect-src 的某个值喜欢default-src .例如,如果您看到 connect-src 'self'; ,这意味着您被禁止/阻止使用 fetch()与运行它的站点以外的任何其他域(同源)。

使用开发工具检查器查找元标记,并使用网络请求面板检查 header 。解决您的问题的唯一方法是删除或修改此标记/ header 以允许 router.project-osrm.org要连接的域,可以显式地将域添加为允许的域,也可以隐式地允许连接任何域 content-src (风险更大)。

要了解 CSP 的实现方式,请查看 Google 的 web fundamentals page on the topic .我也强烈推荐content-security-policy.com/作为快速引用。


为什么这在其他地方有效?

您的代码在 StackOverflow 上有效,因为 SO 没有 CSP connect-src政策。当您在浏览器控制台的空白选项卡或大多数网站上尝试时,情况也是如此。但是,我可以通过稍微修改您的代码段并注入(inject) CSP 元标记来伪造它来证明这是问题所在:

// Add CSP meta tag that will block cross-origin AJAX
var cspMetaTag = document.createElement('meta');
cspMetaTag.setAttribute('http-equiv', 'Content-Security-Policy');
cspMetaTag.setAttribute('content', "connect-src 'self';");
document.querySelector('head').appendChild(cspMetaTag);

fetch('http://router.project-osrm.org/trip/v1/driving/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?overview=false')
.then(response => {
return response.json()
})
.then(data => {
// Work with JSON data here
console.log(data)
})
.catch(err => {
// Do something for an error here
console.log(err.toString());
});

运行上述代码段时打开浏览器控制台,以在浏览器中查看实际的 CSP 阻止消息。

关于javascript - 正在获取 API json 数据警报 : Content Security Policy: The page’s settings blocked the loading of a resource at,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56646258/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com