如何用JavaScript实现Grafana Loki HTTP API？解决请求相关问题

问题描述 #

我需要用JavaScript实现Grafana Loki的query_range API调用，对应curl命令如下：

$ curl -G -s "http://whatever:3100/loki/api/v1/query_range" --data-urlencode 'query={job="bobjob", branch=~"master"} |= ` ` '

遇到两个问题：

• 使用fetch()时，不知道怎么在GET请求中正确传递query参数（GET请求无法携带请求体）
• 使用XMLHttpRequest()时，触发了CORS跨域限制

解决方案 #

1. 用fetch()正确传递GET参数 #

GET请求的参数必须编码到URL的查询字符串中，不能放在请求体内。可以用URLSearchParams自动处理参数编码，代码示例：

const apiUrl = new URL('http://whatever:3100/loki/api/v1/query_range');
const params = new URLSearchParams();
// 传入需要查询的参数，自动完成URL编码
params.append('query', '{job="bobjob", branch=~"master"} |= ` ` ');

apiUrl.search = params.toString();

fetch(apiUrl)
  .then(res => {
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    return res.json();
  })
  .then(result => console.log('查询结果:', result))
  .catch(err => console.error('请求出错:', err));

这段代码的效果和curl的-G（将数据转为GET查询参数）、--data-urlencode（URL编码参数）完全一致。

2. 解决CORS问题 #

CORS是浏览器的同源策略限制，前端无法直接绕过，需从服务端层面解决：

• 修改Loki配置：如果你有权限部署Loki，在配置文件中添加允许跨域的域名：

  server:
    http_listen_port: 3100
    cors_allowed_origins:
      - "http://你的前端域名:端口"
      - "https://你的前端域名"
  

  重启Loki后生效。
• 使用反向代理：无法修改Loki配置时，可通过Nginx等代理转发请求并添加CORS头。示例Nginx配置片段：

  location /loki/ {
    proxy_pass http://loki:3100/;
    add_header Access-Control-Allow-Origin "http://你的前端域名";
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
  }
  

  前端请求时改为调用代理地址（如http://你的代理域名/loki/api/v1/query_range）即可。

内容的提问来源于stack exchange，提问作者user22009348