产品错误:拒绝加载脚本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.

<<p>包/strong>

"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加载脚本，但这是不允许的，因为内容安全策略说脚本只能从'self'(当前源)或内联脚本加载。您需要修改内容安全策略并设置"script-src 'self' 'unsafe-inline' maps.googleapis.com"

这样做之后，你可能会遇到新的错误，在connect-src和其他指令上的策略阻塞。如果可能的话，在从"content - security - policy"加载生产站点时，使用web代理来更改响应头。";Content-Security-Policy-Report-Only"你会立刻看到所有的错误。