由于内容安全策略，Websocket 连接在 localhost 上失败？

Question

因此，我使用ws package 作为后端，这是我从入门页面复制的服务器：

import { WebSocketServer } from 'ws'

const wss = new WebSocketServer({ port: 8080 })

wss.on('connection', function connection(ws) {
  ws.on('message', function message(data) {
    console.log('received: %s', data)
  })

  ws.send('something')
})

现在，在我的浏览器控制台中，我运行这个：

const socket = new WebSocket("ws://localhost:8080")

我收到一个错误：

内容安全策略：该页面的设置阻止了在 ws://localhost:8080/（“connect-src”）处加载资源。

我做了一些谷歌搜索，似乎连接应该是安全的才能正常工作？ 但是，MDN 和其他来源并没有在任何地方提及它。 难道我做错了什么？ 我会很感激任何帮助。

Answer 1

此错误是由内容安全策略 ( mdn ) 造成的，因为它是写在那里的。 如果您正在运行本地服务器并在其中尝试此操作，那么它就可以工作了。

在我的浏览器控制台中我运行这个

所以，这里有一个问题。 新选项卡，或者你运行过的任何地方，可能已经阻止了这个请求以防止 XSS 或类似的东西。 最简单的方法是将元标记<meta http-equiv="Content-Security-Policy" content="connect-src 'ws://localhost:8080';">添加到 HTML 页面或运行本地服务器。

Answer 2

由于某种原因，在浏览器控制台中创建 websocket 连接失败了，但是，在我使用脚本创建了一个简单的 html 页面后，它可以正常工作：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const socket = new WebSocket('ws://localhost:8080')
    console.log(socket)
  </script>
</html>

我希望它可以为其他人节省一些时间。

由于内容安全策略，Websocket 连接在 localhost 上失败？

问题描述

2 个解决方案

解决方案1
1 2021-11-26 13:18:47

解决方案2
0 2021-11-26 13:56:12

由于内容安全策略，Websocket 连接在 localhost 上失败？

问题描述

2 个解决方案

解决方案1 1 2021-11-26 13:18:47

解决方案2 0 2021-11-26 13:56:12

解决方案1
1 2021-11-26 13:18:47

解决方案2
0 2021-11-26 13:56:12