生产错误：拒绝加载脚本 react-google-maps/api

Question

我正在使用 @react-google-maps/api 和 React js

我在使用 useLoadScript 钩子时遇到问题，isLoaded 返回 false 并出现以下错误

Refused to load the script 'https://maps.googleapis.com/maps/api/js?key=[key]&v=weekly&callback=initMap' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

套餐

"react": "^17.0.2",
"@react-google-maps/api": "^2.18.1",

组件代码

  import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_KEy,
  });

请帮忙

Answer 1

您正在尝试从 maps.googleapis.com 加载脚本，但由于内容安全策略规定脚本只能从“自身”（当前来源）或内联脚本加载，因此不允许这样做。您将需要修改内容安全策略并设置“script-src 'self' 'unsafe-inline' maps.googleapis.com”。

执行此操作后，您可能会遇到新的错误，其中策略阻止了 connect-src 和可能的其他指令。如果可能，在将生产站点从“Content-Security-Policy”加载到“Content-Security-Policy-Report-Only”时使用网络代理更改响应标头，您将立即看到所有错误。