Gil*_*esh 3 javascript fetch-api
我一直在使用这个 API 链接，它允许我以纬度和经度的格式查找地址之间的行程持续时间。当我将此链接粘贴到浏览器上时，我得到一个 JSON 对象，因此“它正在工作”（没有凭据等）。
\n当我想从 API 获取数据时，挑战就出现了：
\nfetch(\'http://router.project-osrm.org/trip/v1/driving/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?overview=false\')\n .then(response => {\n return response.json()\n })\n .then(data => {\n // Work with JSON data here\n console.log(data)\n })\n .catch(err => {\n // Do something for an error here\n })我在 Firefox 控制台中收到此错误消息：
\n\n\n内容安全策略：页面\xe2\x80\x99s 设置阻止加载http://router.project-osrm.org/trip/v1/driven/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?概述=假（\xe2\x80\x9cconnect-src\xe2\x80\x9d）。
\n
在尝试了多种不同的方法后，我最终放弃了并来到这里寻求帮助。因此，有人可以向我解释一下这个请求有什么问题吗？另外，为什么当我在浏览器上粘贴时它可以工作，但当我通过 fetch 进行粘贴时却不起作用？再说一遍，我意识到我在这个问题中发布的代码会返回我想要接收的数据。为什么在这种情况下它有效？
\n它失败的原因是内容安全策略（CSP） ，它强制执行一项策略，限制了您可以连接到 WebSockets、EventSource 和 XHR（这是实现的内容）的域。您看到的错误正是说明了这一点，尽管可能不是以最清晰易读的方式。connect-srcfetch()
这意味着，在您尝试运行此代码的页面上，<meta http-equiv="Content-Security-Policy" content="...">中的某个位置有一个标记<head>，或者 GET 页面的请求有一个Content-Security-Policy标头。此外，实际的 CSP 字符串中将包含一个值，或者某个设置为 的connect-src值。例如，如果您看到，则意味着您被禁止/阻止使用除其运行站点（同源）之外的任何其他域。connect-srcdefault-srcconnect-src 'self';fetch()
使用开发工具检查器查找元标记，并使用网络请求面板检查标头。解决您的问题的唯一解决方案是删除或修改此标记/标头以允许router.project-osrm.org连接域，可以显式地通过将域添加为允许的域，也可以隐式地允许连接到任何域content-src（更多有风险）。
要了解 CSP 的实施方式，请查看有关该主题的 Google 网络基础知识页面。我还强烈推荐content-security-policy.com/作为快速参考。
您的代码可以在 StackOverflow 上运行，因为 SO 没有 CSPconnect-src策略。当您在浏览器控制台的空白选项卡或大多数网站上尝试时，也会出现同样的情况。不过，我可以通过稍微修改代码片段并注入 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 阻止消息。
| 归档时间： |
|
| 查看次数： |
12173 次 |
| 最近记录： |