使用JavaScript调用Go Gin本地CRUD API时出现SSL协议错误

核心原因 #

你的前端页面大概率是通过HTTPS协议加载的，浏览器的混合内容安全策略会自动将HTTP请求升级为HTTPS，而你的Gin服务仅监听HTTP端口（未配置SSL证书），因此触发ERR_SSL_PROTOCOL_ERROR错误。Postman不受浏览器安全策略限制，所以能正常调用。

解决方法 #

1. 调整前端页面协议（开发环境快速解决）

如果是本地开发，把前端页面改成通过HTTP协议打开（比如http://localhost:xxx），而非HTTPS。这样浏览器不会强制升级请求协议，fetch的HTTP请求就能正常发送到Gin服务。

2. 给Gin服务配置HTTPS（生产环境推荐）

生成SSL证书（开发环境可使用自签名证书），修改Gin启动代码为HTTPS模式：

func main() {
    router := gin.Default()

    router.GET("/todos", getTodos)
    router.GET("/todo/:id", getTodo)
    router.POST("/todo", addTodo)
    router.DELETE("/todo/:id", removeTodo)
    router.PUT("/todo/:id", updateTodo)
    
    // 使用RunTLS启动HTTPS服务，替换为你的证书实际路径
    router.RunTLS("10.0.154.123:8080", "server.crt", "server.key")
}

同时修改fetch的请求地址为HTTPS：

function getData(urlTail) {
    let options = {
        method: 'GET',
        redirect: 'follow'
    }
    // fetch本身返回Promise，无需手动封装
    return fetch('https://10.0.154.123:8080/todos', options)
        .then(response => response.json());
}

自签名证书在浏览器中会提示不安全，生产环境需使用CA颁发的有效证书。

3. 临时禁用浏览器混合内容限制（仅开发测试用）

• Chrome：地址栏输入chrome://flags/#allow-insecure-localhost，启用"Allow invalid certificates for resources loaded from localhost"选项后重启浏览器。
• Firefox：地址栏输入about:config，搜索security.mixed_content.block_active_content，设置为false。

4. 排查强制HTTPS的外部因素

• 检查是否有浏览器插件（如HTTPS Everywhere）自动转换HTTP请求，临时禁用后测试。
• 确认是否存在反向代理（如Nginx）配置了强制HTTPS跳转，导致请求被重定向。

内容的提问来源于stack exchange，提问作者Thanh Dương Phan