golang websocket 跨域

在现代的Web开发中，跨域请求是一个常见的问题。由于浏览器的同源策略限制，前端页面不能直接发起跨域请求。然而，随着Web应用程序的不断发展，需要从Web服务器获取实时数据的需求也越来越多。这时候，WebSocket成为了一个很好的解决方案，它提供了一种全双工通信的机制，能够在客户端和服务器之间建立持久的连接，实现实时数据传输。

什么是WebSocket？

WebSocket是HTML5提供的一种在单个TCP连接上进行全双工通信的协议。与传统的HTTP请求一次连接一次断开不同，WebSocket通过一次HTTP握手后，建立起客户端和服务器之间的长连接，使双方可以进行实时、双向的数据传输。它基于标准的TCP协议，不受限于同源策略。

使用WebSocket实现跨域请求

要实现跨域请求，首先我们需要在服务器上配置允许特定的源进行连接。在Golang中，我们可以使用`github.com/gin-gonic/gin`来创建一个简单的Web服务器，并进行如下配置：

import (
    "github.com/gin-gonic/gin"
)

func main() {
    r := gin.Default()
    r.Use(corsMiddleware()) // 添加跨域中间件
    r.GET("/ws", func(c *gin.Context) {
        handleWebSocket(c.Writer, c.Request)
    })
    r.Run(":8080")
}

func corsMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set("Access-Control-Allow-Origin", "http://example.com") // 设置允许的源
        c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Origin, Content-Type, Authorization")
        if c.Request.Method == "OPTIONS" {
            c.AbortWithStatus(http.StatusOK)
        } else {
            c.Next()
        }
    }
}

上述代码中，我们使用`corsMiddleware`来添加跨域响应头信息，并允许来自`http://example.com`的跨域请求。其中，`Access-Control-Allow-Origin`设置允许的源，`Access-Control-Allow-Methods`设置允许的HTTP方法，`Access-Control-Allow-Headers`设置允许的请求头。

客户端使用WebSocket建立连接

使用Golang编写的WebSocket服务端已经准备就绪，现在是时候实现前端页面发送跨域请求并建立WebSocket连接了。在前端，我们可以使用浏览器提供的WebSocket API：

const ws = new WebSocket("ws://example.com:8080/ws");
ws.onopen = function() {
    console.log("WebSocket连接已建立");
};
ws.onmessage = function(evt) {
    console.log("收到服务器消息：" + evt.data);
};
ws.onclose = function() {
    console.log("WebSocket连接已关闭");
};

上述代码中，我们使用`new WebSocket()`来创建一个WebSocket对象，并指定要连接的URL。之后，我们可以通过定义`onopen`、`onmessage`和`onclose`等事件处理函数来处理连接建立、接收消息和连接关闭这些事件。

总结

通过使用WebSocket，我们可以在Golang中实现跨域请求，并在前端页面与服务器之间建立持久的、全双工的连接。这种方式不受同源策略的限制，大大提高了实时数据传输的效率和可靠性，为现代Web开发提供了更好的解决方案。