谷歌Place自动补全脚本加载失败，CSP违规且Meta标签无效求助

算力阿峰

2026-8-7

解决Google Places Autocomplete的CSP脚本加载报错问题

你的问题核心是内容安全策略（CSP）的script-src指令未允许Google Maps的域名，且现有指令存在截断（显示'unsa），导致浏览器拒绝加载脚本。以下是具体解决办法：

1. 补全并修正Meta标签的CSP配置

如果用meta标签设置CSP，必须将https://maps.googleapis.com加入script-src允许列表，同时补全截断的指令（比如'unsa'大概率是'unsafe-eval'，Google Maps脚本需要该权限）。示例代码：

<meta http-equiv="Content-Security-Policy" content="script-src 'report-sample' 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com; object-src 'none'; base-uri 'self';">

2. 改用服务器端配置CSP（优先推荐）

若添加meta标签后问题仍存在，大概率是服务器已发送CSP响应头——浏览器会优先采用响应头配置，忽略meta标签。需在服务器端修改：

Nginx：在配置文件中添加/修改add_header Content-Security-Policy指令，将https://maps.googleapis.com加入script-src
Apache：在.htaccess或配置文件中使用Header set Content-Security-Policy配置
Node.js/Express：通过中间件设置响应头，示例：

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "script-src 'report-sample' 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com;"
  );
  next();
});