html+js+clickhouse环境搭建
- 实验背景：
我目前有一台服务器A，和一台主机B，两台设备属于同一局域网，相互之间可以通讯。服务器A中部署着clickhouse，我在主机B中想直接通过javascript代码访问服务器中的clickhouse数据库并获取数据。- ClickHouse 服务器：192.168.0.10（局域网 IP）
- 运行在 Docker，端口默认：8123（HTTP 端口）
- 浏览器前端页面运行在：192.168.0.11 的某个网页中
- 你希望用 JS 代码直接执行 SQL 查询，比如获取某个用户轨迹
- 环境说明：
- 服务器A（ip:192.168.0.10）:通过docker的形式部署了一个clickhouse容器，并开放其8123端口。用户名为Micheal，密码为空。
- 主机B（ip:192.168.0.11）:与A属于同一局域网，可以用DBeaver连接到A中部署的Clickhouse数据库。
操作步骤
step1:校验性工作
- 校验1：Clickhouse的HTTP接口是否可访问。
在浏览器中访问：http://192.168.0.10:8123，看到 Ok.即可
或者在命令行中输入：curl http://192.168.0.10:8123，看到 Ok.即可意外情况1：如果A中访问不了，则可能是容器没开启，或者端口号未映射到宿主机上。
意外情况2：如果A中访问正常，B中访问异常，则可能有以下3个原因：
1）主机B用了梯子，导致地址与A不在一个局域网了。
2）Docker没正确映射端口（去核查docker容器，输入：docker ps,查看是否有类似行0.0.0.0:8123->8123/tcp或者192.168.0.10:8123->8123/tcp,如果是127.0.0.1:8123->8123/tcp那么这说明端口只绑定在本地回环地址，局域网访问不了！）
3)防火墙拦截了请求。（去A中开放它：sudo ufw allow 8123） - 校验2： 测试 SQL 查询接口
curl -X POST "http://192.168.0.10:8123/" --data "SELECT 1"
应该输出为：1
如果不通，可能原因：问题 解决方法 没有暴露端口 启动容器时加上 -p 8123:8123 防火墙阻止了端口 sudo ufw allow 8123 或检查安全组设置 ClickHouse 没启动或报错 docker logs clickhouse 查看日志 宿主机用的是私有 IP 被隔离 确保局域网中其他机器能访问 192.168.0.10
step2:通过nginx设置反向代理(目的：希望前端 JS 通过访问 http://192.168.0.10/clickhouse/ 获取数据)
在A中配置nginx代理
-
1）创建nginx配置文件(用于支持CORS)
# 在服务器的某个目录（比如 /xxx/xxx/xxx）中创建： mkdir -p /xxx/conf.d# 创建配置文件 clickhouse.conf： vim /xxx/conf.d/clickhouse.conf在clickhouse.conf文件中写入如下内容：(注意，改成你自己的服务器IP地址)
server {listen 80;server_name localhost;location /clickhouse/ {proxy_pass http://192.168.0.10:8123/; # 你的服务器IP地址# 屏蔽后端 clickhouse 自带的 CORS 头，避免重复proxy_hide_header Access-Control-Allow-Origin;proxy_hide_header Access-Control-Allow-Methods;proxy_hide_header Access-Control-Allow-Headers;# OPTIONS 预检请求if ($request_method = OPTIONS) {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";add_header Access-Control-Allow-Headers "Content-Type, Authorization";add_header Access-Control-Max-Age 86400;add_header Content-Length 0;add_header Content-Type text/plain;return 204;}# 正常请求添加 CORS 头add_header Access-Control-Allow-Origin * always;add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;} } -
2）创建nginx容器，将A中的80端口映射
docker run -d \--name nginx-clickhouse \-p 80:80 \-v /xxx/conf.d:/etc/nginx/conf.d \nginx说明：
-v 把你刚写的配置文件挂载到 nginx 中
-p 80:80 把 nginx 容器的 80 端口暴露出来- 也可以先创建docker容器，然后再创建容器中的配置文件（/etc/nginx/conf.d/clickhouse.conf），并进行修改。
- 改完以后记得重启nginx（
sudo nginx -s reload）或者重启docker容器（docker restart nginx-clickhouse）
-
3)在命令行测试nginx 是否转发成功
-
测试1）测试 CORS 头是否返回
再次使用 curl 或浏览器开发者工具测试 CORS 配置是否生效：curl -X OPTIONS http://192.168.0.10/clickhouse/ -i你应该看到类似以下响应头：
HTTP/1.1 204 No Content Server: nginx/1.19.3 Date: <timestamp> Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With Access-Control-Max-Age: 1728000 -
测试2）测试代理是否生效
curl -X POST "http://192.168.0.10/clickhouse/" --data "SELECT 1"
应返回：1。说明代理和 ClickHouse 通了。
-
step3: 编写测试代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>ClickHouse SQL 查询页面</title><style>body { font-family: sans-serif; padding: 2em; }textarea { width: 100%; height: 100px; }pre { background: #f4f4f4; padding: 1em; white-space: pre-wrap; }</style>
</head>
<body><h2>ClickHouse 查询测试</h2><textarea id="sql">SELECT now(), version()</textarea><br><br><button onclick="query()">执行 SQL</button><h3>结果：</h3><pre id="output">点击按钮开始查询...</pre><script>async function query() {const sql = document.getElementById('sql').value;const output = document.getElementById('output');output.textContent = '查询中...';try {const response = await fetch('http://192.168.0.10/clickhouse/', { //改成你自己的服务器IP地址method: 'POST',headers: {'Content-Type': 'text/plain','Authorization': 'Basic ' + btoa('user_name:') // 添加密码（如有）: btoa('default:password')},body: sql});const text = await response.text();output.textContent = text;} catch (err) {output.textContent = '请求失败: ' + err;}}</script>
</body>
</html>相关文章：
html+js+clickhouse环境搭建
实验背景： 我目前有一台服务器A，和一台主机B，两台设备属于同一局域网，相互之间可以通讯。服务器A中部署着clickhouse，我在主机B中想直接通过javascript代码访问服务器中的clickhouse数据库并获取数据。 ClickHouse 服务…...
JWT算法详解
JWT（JSON Web Token）的整个算法流程主要基于其签名算法。以最常见的签名算法HS256（HMAC SHA256）为例，以下是详细的算法流程，涵盖编码、签名和验证过程： 编码 构造头部（Header&#x…...
OOA-CNN-LSTM-Attention、CNN-LSTM-Attention、OOA-CNN-LSTM、CNN-LSTM四模型多变量时序预测一键对比
OOA-CNN-LSTM-Attention、CNN-LSTM-Attention、OOA-CNN-LSTM、CNN-LSTM四模型多变量时序预测一键对比 目录 OOA-CNN-LSTM-Attention、CNN-LSTM-Attention、OOA-CNN-LSTM、CNN-LSTM四模型多变量时序预测一键对比预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于OOA-CN…...
Python Cookbook-6.6 在代理中托管特殊方法
任务 在新风格对象模型中，Python 操作其实是在类中查找特殊方法的(而不是在实例中那是经典对象模型的处理方式)。现在，需要将一些新风格的实例包装到代理类中，此代理可以选择将一些特殊方法委托给内部的被包装对象。 解决方案 你需要即时地…...
PCIE Spec ---Base Address Registers
7.5.1.2.1 Base Address Registers (Offset 10h - 24h) 在 boot 到操作系统之前，系统软件需要生产一个内存映射的 address map ，用于告诉系统有多少内存资源，以及相应功能需要的内存空间，所以在设备的 PCI 内存空间中就有了这个 …...
Spring如何通过XML注册Bean
在上一篇当中我们完成了对三种资源文件的读写 上篇内容：Spring是如何实现资源文件的加载 Test public void testClassPathResource() throws IOException { DefaultResourceLoader defaultResourceLoader new DefaultResourceLoader(); Resource resource …...
理解 `#pragma pack`：C/C++内存对齐的钥匙
引言：为什么我的网络程序收发的数据总是错位？ 在网络编程中，你是否遇到过这样的困惑：明明发送方和接收方的结构体定义完全一样，但解析出来的数据却乱七八糟？这很可能是因为内存对齐在作祟。今天我们就来深…...
开源键鼠共享软件的“爱恨情仇“：Deskflow、InputLeap与Barrier的演化史
开源键鼠共享软件的"爱恨情仇"：Deskflow、InputLeap与Barrier的演化史 一、血脉渊源：从Synergy到三足鼎立 这三款软件的起源都与 Synergy 这款商业软件密切相关： 2001年：Synergy开创软件化KVM先河2017年&…...
【Python核心库实战指南】从数据处理到Web开发
目录 前言：技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解核心作用讲解关键技术模块对比 二、实战演示环境配置要求核心代码实现（5个案例）案例1：NumPy数组运算案例2：Pandas数据分析…...
运维：概念、模式与硬件基础
一、运维概述：从网管到智能运维的进化之路 1. 运维岗位的定义 IT运维管理是保障企业IT系统及网络可用性、安全性、稳定性，确保业务连续性的核心工作。通过专业技术手段，对计算机网络、应用系统、电信网络、软硬件环境及运维服务流程等进行综…...
基于Java的不固定长度字符集在指定宽度和自适应模型下图片绘制生成实战
目录 前言 一、需求介绍 1、指定宽度生成 2、指定列自适应生成 二、Java生成实现 1、公共方法 2、指定宽度生成 3、指定列自适应生成 三、总结 前言 在当今数字化与信息化飞速发展的时代，图像的生成与处理技术正日益成为众多领域关注的焦点。从创意设计到数…...
【版本控制】idea中使用git
大家好，我是jstart千语。接下来继续对git的内容进行讲解。也是在开发中最常使用，最重要的部分，在idea中操作git。目录在右侧哦。 如果需要git命令的详解： 【版本控制】git命令使用大全-CSDN博客 一、配置git 要先关闭项目…...
 在 VS2015 中正确关闭串口避免被占用)
QT：Qt5 串口模块 (QSerialPort) 在 VS2015 中正确关闭串口避免被占用
以下是使用 Qt5 串口模块 (QSerialPort) 在 VS2015 中正确关闭串口避免被占用的完整示例代码： #include <QSerialPort> #include <QDebug>// 创建全局或类成员变量（推荐使用智能指针） QSerialPort *serialPort nullptr; // 打开…...
Linux——入门常用基础指令
文章目录 Linux入门常用基础指令使用工具介绍基础指令clear指令pwd指令ls指令cd指令Linux系统下的文件路径及文件存储结构文件结构家目录绝对路径和相对路径tree工具 stat指令which指令alias指令touch指令mkdir指令cat指令rm指令man指令cp指令通配符 * Linux入门常用基础指令 …...
【技术追踪】Differential Transformer（ICLR-2025）
Differential Transformer：大语言模型新架构， 提出了 differential attention mechanism，Transformer 又多了一个小 trick~ 论文：Differential Transformer 代码：https://github.com/microsoft/unilm/tree/master/Diff…...
overlay 模块加载失败问题分析
问题背景 CentOS 7系统上，内核版本是3.10.0-693.21.1.el7.x86_64，加载overlay模块的时候失败了。错误提示说找不到支持的overlay文件系统，让我确认内核足够新并且已经加载了overlay支持。但是检查发现/lib/modules/3.10.0-693.el7.x86_64/ke…...
【Linux网络】应用层自定义协议与序列化
🌈个人主页：秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343 🔥 系列专栏：https://blog.csdn.net/qinjh_/category_12891150.html 目录 应用层 再谈 "协议" 网络版计算器 序列化 和 反序列化 重新理解…...
Vue接口平台学习十——接口用例页面2
效果图及简单说明 左边选择用例，右侧就显示该用例的详细信息。 使用el-collapse折叠组件，将请求到的用例详情数据展示到页面中。 所有数据内容，绑定到caseData中 // 页面绑定的用例编辑数据 const caseData reactive({title: "",…...
目标检测中的损失函数(二) | BIoU RIoU α-IoU
BIoU来自发表在2018年CVPR上的文章：《Improving Object Localization With Fitness NMS and Bounded IoU Loss》 论文针对现有目标检测方法只关注“足够好”的定位，而非“最优”的框，提出了一种考虑定位质量的NMS策略和BIoU loss。 这里不赘…...
SpringAI系列 - MCP篇（一） - 什么是MCP
目录 一、引言二、MCP核心架构三、MCP传输层（stdio / sse）四、MCP能力协商机制（Capability Negotiation）五、MCP Client相关能力（Roots / Sampling）六、MCP Server相关能力（Prompts / Resources / Tools）一、引言 之前我们在接入大模型时，不同的大模型通常都有自己的…...
Linux 入门十一：Linux 网络编程
一、概述 1. 网络编程基础 网络编程是通过网络应用编程接口（API）编写程序，实现不同主机上进程间的信息交互。它解决的核心问题是：如何让不同主机上的程序进行通信。 2. 网络模型：从 OSI 到 TCP/IP OSI 七层模型&…...
沐渥氮气柜控制板温湿度氧含量氮气流量四显智控系统
氮气柜控制板通常用于实时监控和调节柜内环境参数，确保存储物品如电子元件、精密仪器、化学品等，处于低氧、干燥的稳定状态。以下是沐渥氮气柜控制板核心参数的详细介绍及控制逻辑： 一、控制板核心参数显示模块 1）温度显示&am…...
vue3 主题模式 结合 element-plus的主题
vue3 主题模式 结合 element-plus的主题 npm i element-plus --save-dev在 Vue 3 中，实现主题模式主要有以下几种方式 1.使用 CSS 变量（自定义属性） CSS 变量是一种在 CSS 中定义可重用值的方式。在主题模式中，可以将颜色、字体…...
Redis 有序集合（Sorted Set）
Redis 有序集合（Sorted Set） 以下从基础命令、内部编码和使用场景三个维度对 Redis 有序集合进行详细解析： 一、基础命令 命令时间复杂度命令含义zadd key score member [score member …] O ( k l o g ( n ) ) O(klog(n)) O(klog(n))&…...
[c语言日寄]免费文档生成器——Doxygen在c语言程序中的使用
【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...
QtCreator的设计器、预览功能能看到程序图标，编译运行后图标消失
重新更换虚拟机（Vmware Kylin），重新编译和配置了很多第三方库后，将代码跑到新的这个虚拟机环境中，但是出现程序图标不可见，占位也消失，后来继续检查ui文件，ui文件图标也异常&#x…...
QT文件和文件夹拷贝操作
1.拷贝文件夹 //(源文件目录路劲，目的文件目录，文件存在是否覆盖) bool copyDirectory(const QString& srcPath, const QString& dstPath, bool coverFileIfExist) { QDir srcDir(srcPath); QDir dstDir(dstPath); if (!dstDir.exi…...
面试常用基础算法
目录 快速排序归并排序堆排序 n n n皇后问题最大和子数组爬楼梯中心扩展法求最长回文子序列分割回文串动态规划求最长回文子序列最长回文子串单调栈双指针算法修改 分割回文串滑动窗口栈 快速排序 #include <iostream> #include <algorithm>using namespace std;…...
Python-24：小R的随机播放顺序
问题描述 小R有一个特殊的随机播放规则。他首先播放歌单中的第一首歌，播放后将其从歌单中移除。如果歌单中还有歌曲，则会将当前第一首歌移到最后一首。这个过程会一直重复，直到歌单中没有任何歌曲。 例如，给定歌单 [5, 3, 2, 1,…...
悬空引用和之道、之禅-《分析模式》漫谈57
DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 “Analysis Patterns”的第5章“对象引用”原文： Unless you can catch all such references, there is the risk of a dangling reference, which often has painful con…...