Question

我正在尝试部署使用create-react-app创建的应用程序。它在本地工作正常。但是当部署在Heroku上时，会显示以下错误：

SecurityError: The operation is insecure.

我正在使用Pusher库制作反应式记事本，但是我没有看到如何在heroku上正确地对其进行部署。我尝试过使用Firefox，Chrome和Edge，但似乎无法正常工作。

它表明问题出在/ app / webpack / bootstrap中。

  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;```

Any ideas on how to solve this error would be much appreciated.

Answer 1

我遇到了同样的问题。我找不到解决方法。

在有人弄清楚之前，我对Docker有一个解决方法。

在项目根文件夹中放置一个Dockerfile。

msiexec /i demo.msi /quiet user=test log=true

并使用Heroku CLI运行这些heroku命令

C:\Windows\system32\MsiExec.exe -Embedding 3E439F7DA7DE174205150FEBCEB7B14F E Global\MSI0000

我认为这是个很好的贫民窟，所以我刚刚将我的react应用程序部署到了github页面。但是，我想如果我真的希望它出现在Heroku上，我会做到的。

Answer 2

现在已经解决了大约一个星期的问题。

这不是一个很好的解决方案，但可以。

转到您的package.json文件
删除依赖项
替换为以下先前版本：
“反应”：“ ^ 16.8.6”，
“ react-dom”：“ ^ 16.8.6”，
“反应脚本”：“ 3.0.1”

npm install
推送到heroku

真的很愚蠢，但为我工作。

Answer 3

我遇到了同样的问题。可能令人惊讶的是，错误跟踪与实际错误不匹配。检查您的JavaScript控制台中是否存在“ CSP”或“内容安全策略”的错误。解决方案是在您的内容安全策略中允许服务器的Web套接字。

https://github.com/w3c/webappsec-csp/issues/7

使用connect-src声明“ self”的CSP将不允许WebSocket返回相同的主机/端口，因为它们的来源不同。对于那些尚未详细研究CSP规范并牢牢掌握相同来源安全性模型的开发人员来说，这可能是一个惊喜。

修改您的public/index.html以包括以下connect-src：

<meta http-equiv="Content-Security-Policy" content="
      ...
      connect-src 'self' wss://host:port ws://host:port; <% // Remove ws:/wss: after https://bugs.webkit.org/show_bug.cgi?id=201591 is fixed %>
      ...
    " />

假设它是开发服务器且不打算用于生产环境，请改用它：

<meta http-equiv="Content-Security-Policy" content="
      ...
      connect-src 'self'<%= process.env.NODE_ENV === 'development' && " ws:" || "" %>; <% // Remove ws: after https://bugs.webkit.org/show_bug.cgi?id=201591 is fixed %>
      ...
    " />

针对Safari跟踪此错误的错误：https://bugs.webkit.org/show_bug.cgi?id=201591

Answer 4

我认为Stephanfalcon的发展方向正确。您暂时需要做的就是使用react-scripts 3.2.0。我通过create-react-app提交了此错误：

https://github.com/facebook/create-react-app/issues/8250

在react-scripts 3.3.0中，他们从以下位置更改了websocket的协议：

// Connect to WebpackDevServer via a socket.
var connection = new SockJS(
  url.format({
    protocol: window.location.protocol,
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

收件人：

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

在Create React App Github上阅读相关问题，听起来他们将在react-scripts 3.3.1中解决此问题。

SecurityError：操作不安全-React Heroku

4 个答案: