解决 Golang WebSocket 连接失败：Chrome 报错 400-Golang-PHP中文网

解决 Golang WebSocket 连接失败：Chrome 报错 400

DDD

发布： 2025-10-06 12:50:28

原创

921人浏览过

解决 golang websocket 连接失败：chrome 报错 400

本文旨在帮助开发者解决在使用 Golang 构建 WebSocket 服务时，Chrome 浏览器出现 "WebSocket connection failed: Unexpected response code: 400" 错误的问题。通过提供修改后的服务端和客户端代码，阐述了跨域请求导致该错误的原因，并提供了将 HTML 文件托管在 Golang 服务器上的解决方案。

问题分析

当 Chrome 浏览器报告 "WebSocket connection failed: Unexpected response code: 400" 错误时，通常是因为浏览器检测到跨域请求，并认为客户端没有足够的权限访问 WebSocket 服务。默认情况下，浏览器会阻止从一个域加载的网页去请求另一个域的资源，这被称为同源策略。

解决方案

解决此问题的关键是将 HTML 页面也托管在 Golang 服务器上，确保 WebSocket 连接与提供 HTML 页面的源同源。

1. 修改 Golang 服务端代码

立即学习“go语言免费学习笔记（深入）”；

修改 main.go 文件，使其能够同时提供静态文件服务和 WebSocket 服务。以下是修改后的代码：

package main

import (
    "fmt"
    "log"
    "net/http"

    "golang.org/x/net/websocket"
)

func Echo(ws *websocket.Conn) {
    var err error

    for {
        var reply string

        if err = websocket.Message.Receive(ws, &reply); err != nil {
            fmt.Println("Can't receive")
            break
        }

        fmt.Println("Received back from client: " + reply)

        msg := "Received:  " + reply
        fmt.Println("Sending to client: " + msg)

        if err = websocket.Message.Send(ws, msg); err != nil {
            fmt.Println("Can't send")
            break
        }
    }
}

func main() {
    http.Handle("/", http.FileServer(http.Dir("."))) // 提供静态文件服务
    http.Handle("/socket", websocket.Handler(Echo))   // WebSocket 服务
    log.Println("serving")
    if err := http.ListenAndServe(":1234", nil); err != nil {
        log.Fatal("ListenAndServe:", err)
    }
}

登录后复制

关键修改在于添加了 http.Handle("/", http.FileServer(http.Dir("."))) 这一行代码。它将根路径 / 映射到当前目录 (.)，允许服务器提供当前目录下的静态文件，包括 HTML 文件。同时，将WebSocket服务的路径修改为 /socket。

2. 修改 HTML 客户端代码

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

修改 HTML 文件，使其连接到正确的 WebSocket 服务路径。以下是修改后的 index.html 文件：

<html>

<head>
</head>

<body>
  <script type="text/javascript">
    var sock = null;
    var wsuri = "ws://127.0.0.1:1234/socket"; // 修改后的 WebSocket 服务路径

    window.onload = function() {

      console.log("onload");

      sock = new WebSocket(wsuri);

      sock.onopen = function() {
        console.log("connected to " + wsuri);
      }

      sock.onclose = function(e) {
        console.log("connection closed (" + e.code + ")");
      }

      sock.onmessage = function(e) {
        console.log("message received: " + e.data);
      }
    };

    function send() {
      var msg = document.getElementById('message').value;
      sock.send(msg);
    };
  </script>
  <h1>WebSocket Echo Test</h1>
  <form>
    <p>
      Message: <input id="message" type="text" value="Hello, world!">
    </p>
  </form>
  <button onclick="send();">Send Message</button>
</body>

</html>

登录后复制

关键修改在于将 wsuri 的值修改为 "ws://127.0.0.1:1234/socket"，与服务端代码中 WebSocket 服务的路径相匹配。

3. 目录结构

确保 index.html 文件与 main.go 文件位于同一目录下。例如：

.
├── index.html
└── main.go

登录后复制

4. 运行程序

保存 main.go 和 index.html 文件。
在终端中，进入包含这两个文件的目录。
运行 go run main.go 命令启动服务器。
在 Chrome 浏览器中打开 http://127.0.0.1:1234/，即可访问 HTML 页面并建立 WebSocket 连接。

注意事项

确保安装了 golang.org/x/net/websocket 包。如果没有安装，可以使用 go get golang.org/x/net/websocket 命令安装。
如果仍然遇到问题，请检查浏览器的开发者工具，查看是否有其他错误信息。
在生产环境中，建议使用更健壮的静态文件服务器，例如 Nginx 或 Apache。