个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我一直在玩 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/
25
4
0
我是 PHP 新手。我在 WordPress 中遇到了这种语法.该代码的最后一行是做什么的？ $page = $_SERVER['REQUEST_URI']; $page = str_replace(
为了清楚起见 - 这是我在这个问题中谈论的盒子的图片: 背景:我为客户构建了一个相对复杂的 WP 网站，它更像是一个 CMS 而不是博客，并且依赖于正在构建的页面层次结构。 (嗯，它们实际上是设置了
GitHub Help显示了 GitHub Pages 的以下选项: gh-pages 分行 主分支 master 分支/docs 文件夹 那么我们可以使用名称不是 master 或 gh-pages
我正在使用 AngularJS 框架为我的前端开发一个 Web 应用程序。对于我的登录页面，我必须阻止用户浏览除登录页面和注册之外的其他页面。但是我现在所做的代码也阻止用户导航到注册页面。以下是我的代
如果不将/1 粘贴到 url 上，是否可以改变 Zend_Paginator 来处理 URL？当前用户转到/aaron/studio。然后用户应该点击页面并开始访问 URL，例如:/aaron/stu
目前，我创建了一个可以生成PDF的系统。 PDF 中的数据来自 MySQL 数据库。现在，我像这样显示数据 第一页:仅显示一条数据。 第二页文字:将显示数据(每页最多 3 个数据) 说得更清楚一点，比
我正在尝试构建我的 ASP.NET MVC 4.5 项目以使用搜索引擎友好的 URL。我正在使用以下路由映射。 routes.MapRoute( name: "Default", ur
我为打印按钮使用了以下代码: Data.str = null; //Data.str = textBox24.Text.ToString(); string s = "select * from te
我们有一个带有两个 View 的单页应用程序(本质上是一个项目列表和所选项目的详细信息页面)。两个 View 都在单独的 html 文件中，我们使用 sammy.js 在页面之间进行转换/导航。在我们
(如果有人需要更多信息或更好的描述，请告诉我) 您好，我从这里添加了 viewPagerLibrary:http://viewpagerindicator.com/#introduction今天在我的
我是网页的新手，刚刚开始学习它。在创建新的 Razor 网站后，当我点击添加新项目时，我会看到可以添加的项目的多个选项。它们是: Layout Page(Razor) 这些类似于Master Page
我正在尝试使用 activeadmin 和 awesome_nested_set 创建页面模型。我一直在试图弄清楚如何使用正确的尾随 slug(例如/page1/page1subpage/a-subp
我正在尝试将 DotNetOpenAuth 与 Razor/MVC3 一起使用。大多数 DotNetOpenAuth HTML 助手都接受 System.Web.UI.Page 作为参数之一，使用 W
在我们的应用程序中，当我们在某些页面之间导航时，我们会在进入下一页之前发出服务器请求。发生这种情况时，当前页面上会显示加载图形。奇怪的是，在等待服务器响应完成时，下一页的样式会应用到当前页面。这会导致
我正在使用 ASP.NET Core 3.1 MVC 和 Razor 页面构建 Web 应用程序。 我是 Razor 页面的新手。 我使用上面的方法创建了一个基本应用程序。我想在应用程序启动时加载登录
我遇到了一个我似乎无法解释的问题。我在 Umbraco 中设置了一个主模板和 2 个子模板，但出现以下错误: Content controls have to be top-level control
我正在创建一个网络应用程序，允许用户选择他们当前的部门、他们将临时借调到哪个部门、他们正在执行的任务以及在任务上花费的时间。我需要写一些声明，根据他们当前部门的选择来确定他们所在的团队(当前的或新的)
当我导航到一个页面时，我得到了404错误页面，该页面说，在我刷新浏览器之前，没有包含此URL的页面，然后该页面才会显示。。我尝试使用@REACH/ROUTER来导航，而不是使用REACT-ROUTER
我正在使用 Html2Pdf 将一些 HTML 文件转换为 PDF。我还需要添加分页符来划分文档的各个部分。为此，我使用 标签。 我有以下 HTML 片段: ...
我正在使用另一个静态网站生成器，我希望能够将源文件(以markdown格式)以及生成的网站 checkin 到我的username.github.com存储库中。因此，很像Jekyll，但我没有使用J
我是一名优秀的程序员,十分优秀！