使用Pug模板引入Mapbox资源时触发Content Security Policy违规错误的求助

嘿，作为Pug新手碰到这个问题很正常，我来帮你理清楚怎么解决！

首先，你遇到的“违反Content Security Policy（CSP）”错误，是浏览器的安全机制在起作用——CSP会限制页面能加载的资源来源，而你现在引入的Mapbox脚本和样式不在当前允许的源列表里，所以被拦截了。

下面是具体的解决步骤：

1. 找到你的CSP配置位置 #

CSP通常有两种设置方式：

• HTML元标签：在页面的<head>里（也就是你的base.pug的head块中），会有类似<meta http-equiv="Content-Security-Policy" content="...">的标签
• 服务器响应头：比如Nginx、Apache等服务器的配置文件里设置的响应头

2. 更新CSP规则以允许Mapbox资源 #

根据你加载的Mapbox资源类型，需要在CSP中添加对应的源：

• 脚本资源（script-src）：允许https://api.mapbox.com
• 样式资源（style-src）：允许https://api.mapbox.com，另外Mapbox的CSS可能包含内联样式，所以需要加上'unsafe-inline'（如果后续想更安全，可以用nonce或hash替代，但新手阶段先这样解决）
• 地图瓦片资源（img-src）：允许https://*.tiles.mapbox.com（Mapbox的地图瓦片来自这个域名）
• 字体资源（font-src）：允许https://api.mapbox.com（Mapbox样式里可能引用了字体文件）

如果你用Pug的元标签设置CSP #

在base.pug的head块中添加或修改这个meta标签：

meta(http-equiv='Content-Security-Policy' content="default-src 'self'; script-src 'self' https://api.mapbox.com; style-src 'self' https://api.mapbox.com 'unsafe-inline'; img-src 'self' https://*.tiles.mapbox.com; font-src 'self' https://api.mapbox.com")

如果是服务器端设置CSP #

以Nginx为例，在配置文件中添加响应头：

add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://api.mapbox.com; style-src 'self' https://api.mapbox.com 'unsafe-inline'; img-src 'self' https://*.tiles.mapbox.com; font-src 'self' https://api.mapbox.com";

3. 验证修改是否生效 #

修改后刷新页面，打开浏览器开发者工具（F12）的控制台，如果没有再出现CSP相关错误，就说明配置成功了。如果还有错误，控制台会明确指出是哪个CSP指令违反了，你可以针对性调整源列表。

内容的提问来源于stack exchange，提问作者Ghostie.