- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在玩 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/
我无法理解 on-policy 方法(如 A3C )和 off-policy 方法(如 DDPG )之间的根本区别是什么。据我所知,无论行为策略如何,off-policy 方法都可以学习到最优策略。它
在我们的 ADX 集群中,表上没有分区策略和合并策略,但 adx 仍然创建范围。我很困惑它是如何工作的以及默认设置是什么。有谁知道这个吗? 此外,分区键的组合如何工作?例如我有 { "Partit
我最近在尝试本地上传图像时开始遇到此错误。不过,我以前不习惯收到错误。 S3 方面或代码方面没有任何变化。不过,上传在生产中仍然有效。我已经尝试了所有常见的方法,重新启动服务器,重新启动计算机,更改为
在 OPA 中,很清楚如何查询 condition AND condition : values := { "value1": { "a": "one" }, "value2":
我有一个自定义政策 // Policy: Management Group Level resource "azurerm_policy_definition" "only-deploy-in-eas
鉴于以下(为了论证而简化)docker-compose.yml文件: version: '3' services: postgres: image: fleetit-postgres
我是 OPA(开放策略代理)的新手,正在尝试使用 REST API/v1/policies/{id} 创建新策略。有用!但是,OPA 服务器将其保存到内存中,并且在重新启动后我的所有策略都被删除了。我
我想在 K8sPSPCapabilities 约束模板中将一个容器列入白名单,但我在使用 rego 语言时遇到了一些困难。我想禁止除特定容器之外的所有容器的 NET_RAW 功能。如果有人能指出我正确
S3 存储桶策略与其指定管理员的用户策略之间的关系是什么(或应该是什么)? 例如假设我新创建了一个存储桶: $ aws --profile admin --endpoint-url http://lo
我正在为我公司的网站添加 Content-Security-Policy-Report-Only 标题。在我研究它时,我发现一些页面已经设置了 Content-Security-Policy head
应Content-Security-Policy header 是在每个服务器响应(图像、CSS、JS 等)中还是仅在 text/html(PHP 脚本的 .html 或 HTML 输出)中? 最佳答
我的 https://my-site.com网站有一些类似下面的 html: 在控制台中,我得到这个错误: Refused to load media from 'blob:https://my-s
我收到这个错误,我不知道为什么,我包含的脚本有效? 并且错误仅在我加载子页面时出现。不是在我加载起始页时。 那么我做错了什么? The source list for Content Security
我想创建一个包含多个自定义 Azure 策略的 Azure 策略计划 我有以下自定义政策 # Azure Provider source and version being used terrafor
我们正在使用 Azure AD B2C(仍处于预览版)对我们的应用程序的客户进行身份验证。 我们将使用自定义 html 模板来实现登录体验和注册(使我们对 MS 内容之外的格式和链接拥有更多权力)。
我是 Istio 的新手。我正在使用 JWT 实现授权。有效的 JWT token 不会反射(reflect) DENY 操作。我添加了 JWT Payload and Authorization P
我想用 JUnit 和 Apache CXF 编写一个简单的集成测试来测试一些支持 WS-Security 的服务。当我尝试运行我的代码时: MyService myService = new myW
在 https://securityheaders.com 上测试我们的网站时,它表明我们缺少两个 header : 推荐人政策 功能政策 我们的站点是 Jira 8.3.1,它本身运行 Tomcat
我需要在数据类型“DateTime”的自定义策略中使用扩展属性。我将声明类型定义如下。 myAttrbute dateTime This is for
我的信任库中有服务器根证书,在设置 -Djavax.net.debug=all 后,我可以看到信任库已初始化并且受信任的证书在那里: trustStore is: test.truststore tr
我是一名优秀的程序员,十分优秀!