javascript - 尝试加载 mapbox 时收到错误消息
问题描述
mapboxgl.accessToken = 'xxxxxxxx';
var map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
});
doctype html
html
head
block head
meta(charset='UTF-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
link(rel='stylesheet' href='/css/style.css')
link(rel='shortcut icon', type='/image/png' href='/ img/favicon.png')
link(rel='stylesheet', href='https://fonts. googleapis.com/css?family=Lato:300,300i,700')
title Natours | #{title}
body
//- HEADER
include _header
//- CONTENT
block content
h1 this is a placeholder heading
//- FOOTER
include _footer
script(src='/javascript/mapbox.js')
拒绝加载脚本“https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js”,因为它违反了以下内容安全策略指令:“script-src 'self'” . 请注意,'script-src-elem' 没有明确设置,因此 'script-src' 用作后备。
解决方案
我今天碰到了这个问题。我知道你现在可能已经得到答复了。但下面仍然是你的答案:学分东林-
发送 CSP 标头以允许加载来自 mapbox 的脚本。下面的示例:
exports.getTour = catchAsync(async (req, res, next) => {
const tour = await Tour.findOne({ slug: req.params.slug }).populate({
path: 'reviews',
fields: 'review rating user'
});
res
.status(200)
.set(
'Content-Security-Policy',
"default-src 'self' https://*.mapbox.com ;base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob: ;script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests;"
)
.render('tour', {
title: `${tour.title} Tour`,
tour
});
});
推荐阅读
- c++ - 在指定的自定义类迭代器位置插入节点
- python - 如何将循环添加到用户名和密码登录(Python)?
- python - 如何在 Python 中打印带引号的字符串和变量?
- asp.net - ASP.Net HyperLinkField、弹出窗口和 Chrome - 如何
- logstash - 为什么我的代码在 grok 调试器中不起作用
- sql-server - 如何使用日期和时间参数进行 ssrs 查询
- python-3.x - RETR 从 ftp 下载 zip 文件不写入
- javascript - 回调函数内部变量不可访问
- c# - 如何在 C# 中从 JObject 中读取数组的名称
- apache-flink - EMR Flink 提交的作业不遵守通过的 JVM 参数