3

我正在尝试部署使用 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.
4

4 回答 4

2

我认为 Stephanfalcon 是在正确的轨道上。您暂时需要做的就是使用 react-scripts 3.2.0。我用 create-react-app 提交了这个错误：

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

在 react-scripts 3.3.0 中，他们将 websockets 的协议从：

// 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 中修复此问题。

于 2019-12-28T12:43:35.650 回答
1

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

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

使用 connect-src 'self' 声明 CSP 将不允许 websockets 返回相同的主机/端口，因为它们的来源不同。对于没有详细研究过 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

于 2019-12-24T20:00:02.223 回答
0

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

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

将 Dockerfile 放在项目根文件夹中。

FROM node:alpine

ENV NODE_ENV=production

WORKDIR /usr/src/app

COPY . .

RUN npm i\
 && npm run build\
 && npm i -g serve

CMD serve -s build

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

$ heroku container:login
$ heroku container:push web
$ heroku container:release web

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

于 2019-12-18T15:09:08.583 回答
0

已经处理这个问题大约一个星期了。

这不是一个很好的解决方案，但它有效。

  1. 转到您的 package.json 文件
  2. 移除依赖

  3. 替换为这些以前的版本：
    “react”：“^16.8.6”，
    “react-dom”：“^16.8.6”，
    “react-scripts”：“3.0.1”

  4. npm install在终端

  5. 推送到heroku

真的很愚蠢，但对我有用。

于 2019-12-19T22:25:57.810 回答