拒绝连接到 'ws://localhost:3000/cpp'，因为它违反了以下内容安全策略指令：

Question

如何解决这个错误？ where/how 我要设置这些设置吗？我是 electron/react

的新手

Refused to connect to 'ws://localhost:3000/cpp' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

我正在使用 electron + react 和 electron-forge 构建系统。我试过在 froge.config.js:

中使用它

 plugins: [
    [
      "@electron-forge/plugin-webpack",
      {
        devServer: {
          allowedHosts: 'auto'
        }

         // rest of config 
    ]
  ]

连这一段HTML:

<meta http-equiv="Content-Security-Policy" content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;">

但是 none 有效。我错过了什么？

Answer 1

WebpackPluginRendererConfig

/**
     * Sets the [`Content-Security-Policy` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)
     * for the Webpack development server.
     *
     * Normally you would want to only specify this as a `<meta>` tag. However, in development mode,
     * the Webpack plugin uses the `devtool: eval-source-map` source map setting for efficiency
     * purposes. This requires the `'unsafe-eval'` source for the `script-src` directive that wouldn't
     * normally be recommended to use. If this value is set, make sure that you keep this
     * directive-source pair intact if you want to use source maps.
     *
     * Default: `default-src 'self' 'unsafe-inline' data:;`
     * `script-src 'self' 'unsafe-eval' 'unsafe-inline' data:`
     */
    devContentSecurityPolicy?: string;

所以这应该可以解决问题

 plugins: [
        [
          "@electron-forge/plugin-webpack",
          {
            devServer: {
              allowedHosts: 'auto'
            },
            devContentSecurityPolicy: "connect-src 'self' ws://localhost:3000/cpp 'unsafe-eval'",
    
             // rest of config 
        ]
      ]

拒绝连接到 'ws://localhost:3000/cpp'，因为它违反了以下内容安全策略指令：

Refused to connect to 'ws://localhost:3000/cpp' because it violates the following Content Security Policy directive:

content-security-policy

reactjs

windows-10

electron

electron-forge