Question

我一直在玩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控制台中收到此错误消息：

内容安全政策：该页面的设置禁止在http://router.project-osrm.org/trip/v1/driving/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?overview=false（“ connect-src”）加载资源。

尝试了多种倍数方法后，我最终放弃了，来到这里寻求帮助。因此，有人可以向我解释该请求出了什么问题吗？另外，为什么当我将其粘贴到浏览器上时却能正常工作，而当我通过提取来做到这一点时却无法工作？再说一遍，我意识到我在这个问题中被删节的代码已向我返回了我想要接收的数据。为什么在这种情况下有效？

提前谢谢

Answer 1

由于 C 有意图的 S 安全性 P 政策（或CSP），该政策正在执行{{1} }，这限制了您可以连接到的WebSocket，EventSource和XHR（这是connect-src实现的域）的域。您看到的错误恰恰说明了这一点，尽管可能不是以最清晰的方式阅读。

此含义的意思是，在您试图运行此代码的页面上，fetch()某处有一个<meta http-equiv="Content-Security-Policy" content="...">标记，或者该请求GET页面具有一个<head>标头。此外，实际的CSP字符串中将包含一个Content-Security-Policy值，或者某个将connect-src设置为connect-src的值。例如，如果看到default-src，则意味着您被禁止/禁止将connect-src 'self';与运行其站点的其他域（同源）一起使用。

使用开发人员工具检查器查找meta标记，然后使用网络请求面板检查标题。解决该问题的唯一方法是删除或修改此标记/标题，以允许通过将域添加为允许的域来显式地连接fetch()域，或者通过允许将任何域作为隐式地来隐式连接该域。已连接到router.project-osrm.org（风险更高）。

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

为什么要在其他地方使用？

您的代码在此处可在StackOverflow上使用，因为SO没有CSP content-src策略。在浏览器的控制台中空白选项卡或大多数站点上尝试时，情况相同。但是，我可以通过稍微修改代码段并注入CSP元标记来伪造它来证明这是问题所在：

connect-src

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

正在获取API json数据警报：内容安全政策：该页面的设置阻止了在以下位置加载资源

1 个答案:

为什么要在其他地方使用？