本文详解如何使用 Go 语言构建轻量 HTTP 服务，为 Highcharts 提供跨域 JSON 数据接口，并解决 jQuery AJAX 动态加载时常见的 parsererror 和跨域问题。
本文详解如何使用 go 语言构建轻量 http 服务，为 highcharts 提供跨域 json 数据接口，并解决 jquery ajax 动态加载时常见的 `parsererror` 和跨域问题。
在 Web 可视化开发中，Highcharts 是一个功能强大且易于集成的 JavaScript 图表库。当需要展示实时或动态变化的数据（如传感器读数、系统监控指标）时，通常采用“前端定时轮询 + 后端按需返回数据”的模式。但初学者常遇到 AJAX 请求成功却报 parsererror、xxx was not called 等错误——这往往不是数据格式问题，而是跨域限制与JSONP 兼容性误用所致。
回顾你提供的前端代码，关键点在于：
$.ajax({
url: 'http://localhost:3000/',
success: function(point) {
chart.series[0].addPoint(eval(point), true, shift);
// ...
}
});
此处 jQuery 默认发起的是 普通 AJAX（XMLHttpRequest）请求，期望返回标准 JSON 字符串（如 [14,5]）。但你的 Go 服务未设置 CORS 响应头，而浏览器出于安全策略会拦截响应，导致解析失败。更隐蔽的问题是：若前端误启用了 JSONP（例如 dataType: 'jsonp' 未显式声明但 jQuery 自动降级），则后端必须返回形如 callback([14,5]) 的函数调用语句——而你的 Go 服务只返回纯 JSON，自然触发 xxx was not called 错误。
✅ 正确做法是：保持前端为标准 AJAX，后端显式启用 CORS。
以下是完整、可运行的 Go 服务端优化代码：
package main
import (
"encoding/json"
"fmt"
"math/rand"
"net/http"
"time"
)
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
// ✅ 关键：允许跨域请求（开发阶段可设为 "*"；生产环境请指定可信域名）
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Content-Type", "application/json; charset=utf-8")
// 模拟动态数据：生成两个随机整数（适配 Highcharts addPoint 所需格式）
data := []float64{
float64(time.Now().UnixMilli()),
float64(rand.Intn(100)),
}
// Highcharts.addPoint(point, redraw, shift) 接收 [x, y] 或 y 值
// 此处返回 [timestamp, value] 便于时间轴图表使用
if err := json.NewEncoder(w).Encode(data); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
fmt.Println("Served dynamic point:", data)
})
fmt.Println("Server listening on :3000...")
http.ListenAndServe(":3000", nil)
}
? 注意事项：
- Access-Control-Allow-Origin: "*" 仅适用于开发或内部测试；生产环境务必替换为具体前端域名（如 "https://myapp.com"），避免安全风险；
- Content-Type 应设为 "application/json" 而非 "text/json"（后者非标准 MIME 类型，部分浏览器可能忽略）；
- 使用 json.NewEncoder(w).Encode() 替代 json.Marshal() + w.Write()，更安全且自动处理编码错误；
- Highcharts addPoint() 支持两种格式：单值 y（如 42）或坐标对 [x, y]（如 [1717023456000, 42]）。建议返回带时间戳的数组，以便 X 轴正确显示为 datetime 类型；
- 前端无需修改 dataType，保持默认 "json" 即可；移除 eval()（不安全），直接使用 point（已自动解析为数组）：
success: function(point) {
// ✅ 安全解析：point 已是 [timestamp, value] 数组
chart.series[0].addPoint(point, true, series.data.length > 20);
}
? 进阶提示：若需更高性能或长连接支持，可考虑将轮询（polling）升级为 Server-Sent Events（SSE）或 WebSocket，Go 原生支持 net/http 中的 SSE 流式响应，Highcharts 亦可通过 chart.series[0].setData() 实现批量更新。
至此，Go 后端与 Highcharts 前端即可稳定协作，实现毫秒级动态图表刷新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
