# api-post

**Repository Path**: stdylan/api-post

## Basic Information

- **Project Name**: api-post
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-17
- **Last Updated**: 2026-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# API 调试工具

纯静态、零依赖、零构建的 API 调试工具，参考 Hoppscotch 的简洁布局。数据保存在浏览器本地（localStorage），无需登录账号密码，可直接发送请求、查看响应、格式化 JSON。可一键部署到 Cloudflare Pages。

## 功能特性

- 支持 GET / POST / PUT / DELETE / PATCH 等请求方法（默认 POST）
- 请求参数（Query）、请求头（Headers）、请求体（Body）编辑
- 请求体支持 JSON / 表单（Form） / 纯文本，默认 JSON
- 请求体与响应区均带 **JSON 语法高亮**
- 请求体「美化（格式化）」与「复制」按钮
- 集合（Collection）两级管理：**集合 → 请求**，本地保存
- 点击集合中的请求做 **脏检查**：有改动时提示是否保存，无改动直接切换
- 新建集合：集合标题旁的 `＋` 内联输入；保存时必填名称，可选已有集合或新建集合
- CORS 跨域：公网地址默认走内置 Cloudflare `/proxy` 代理；本地 / 内网地址**默认浏览器直连（零服务，需关闭浏览器安全限制）**，也可勾选「使用本地代理」走本机转发

## 目录结构

```
.
├── index.html          # 单页结构（侧边栏集合 + 请求编辑 + 响应区）
├── styles.css          # 全部样式（CSS 变量主题）
├── app.js              # 逻辑：localStorage 持久化、脏检查、JSON 高亮编辑器、代理路由
├── local-proxy.js      # 本地代理（可选，Node 零依赖）：勾选「使用本地代理」后转发本机/局域网接口
└── functions/
    └── proxy.js        # Cloudflare Pages Function：/proxy 跨域代理
```

## 本地运行

直接用浏览器打开 `index.html` 即可使用。地址栏支持省略协议：输入 `localhost:3000`、`127.0.0.1:8080`、`192.168.10.61:8080` 会自动补 `http://`。

> 若关闭顶部的「使用代理」，浏览器会**直连**公网接口，需要目标服务器自身允许 CORS，否则会被浏览器拦截。本地 / 内网地址默认就是浏览器直连（见上节），勾选「使用本地代理」才会走本机转发。

## 本地 / 内网地址（localhost、127.0.0.1、192.168.x.x 等）

工具部署在 Cloudflare 上时，`/proxy` 代理运行在 Cloudflare 的边缘服务器上，**无法访问你本机或局域网的私有地址**；而浏览器直连本地服务时，若目标未返回 CORS 头会被拦截，且 HTTPS 页面访问 HTTP 局域网地址还会被「混合内容」拦截。**设计目标：以本地为主、零服务、不用每次起代理**。因此默认策略是：

> **本地 / 内网地址默认浏览器直连（零服务）**，仅当目标服务未开放 CORS 或混合内容被拦时，再选择「使用本地代理」作为补充手段。

### 方式一：浏览器直连（默认，零服务，推荐)

什么都不用装。只要让浏览器放行跨域即可，有两种常用办法：

1. **启动参数关闭安全限制（开发调试专用）**

   ```bash
   # Chrome / Edge，注意换一个新的用户数据目录
   chrome.exe --user-data-dir="%TEMP%\apidebug-profile" --disable-web-security
   # 或用 Edge
   msedge.exe  --user-data-dir="%TEMP%\apidebug-profile" --disable-web-security
   ```

   用这个窗口打开工具页面，localhost / 局域网地址即可**直接调用**，无需任何代理、无需目标服务改 CORS。

2. **安装 CORS 浏览器插件**（如 "Allow CORS: Access-Control-Allow-Origin"），在调试时开启，效果同上。

> 方式一最适合「本地为主」的场景：你本就在本地开发，顺手用关闭安全限制的浏览器窗口调试即可，不必再跑一个 Node 服务。

### 方式二：使用本地代理（可选，需起服务）

如果你不想关闭浏览器安全限制，或需要 HTTPS 页面访问 HTTP 局域网地址，可在顶部勾选「使用本地代理」。首次使用需先启动本机代理：

```bash
node local-proxy.js            # 监听 http://127.0.0.1:8787/proxy
# 或自定义端口： PORT=9000 node local-proxy.js
```

勾选后，所有 `localhost` / `127.0.0.1` / `192.168.x.x` / `10.x` / `172.16-31.x` 等本地/内网地址会**经本地代理转发**：浏览器只与本机 `127.0.0.1` 通信（localhost 豁免混合内容），由代理服务端请求目标并补上 CORS 头返回，因此**无需目标服务做 CORS 配置**。

> 若勾选后显示「本地代理未运行或不可达」，说明 `node local-proxy.js` 没在跑，启动它即可；或取消勾选改回浏览器直连。

### 路由规则一览

| 地址类型 | 默认行为 | 设置项 |
| --- | --- | --- |
| 公网地址 | 走 Cloudflare `/proxy` 跨域代理 | 取消「使用代理」可改浏览器直连 |
| 本地 / 内网 | 浏览器直连（零服务） | 勾选「使用本地代理」改走本机转发 |

> 注意：本地代理仅用于开发调试访问本机/局域网接口，不要把它暴露在公网上。

## 部署到 Cloudflare Pages

1. 把**本目录内容**作为 Pages 项目的根目录（不要在外面再套一层子目录）。
2. 构建命令留空，输出目录设为仓库根。
3. `functions/proxy.js` 会被 Cloudflare 自动识别为 Pages Function，提供 `/proxy` 跨域代理。
4. 页面默认开启「使用代理」，直连站点自身的 `/proxy` 转发请求并带回 `Access-Control-Allow-Origin: *`，因此跨域接口可正常调用。

## 数据存储在哪

所有集合与请求保存在浏览器的 `localStorage`，纯本地、不上传任何服务端，各设备数据相互独立：

- `apidebugger_collections`：集合与请求数据（两级结构）
- `apidebugger_settings`：设置（是否使用 Cloudflare 代理、是否使用本地代理、本地代理地址）

## 关于跨域（CORS）

浏览器同源策略会拦截前端直连第三方接口。`/proxy` 由服务端（Cloudflare Function）代为转发请求，并附加 CORS 响应头，从而绕过跨域限制。若不使用代理，则需目标接口服务器自行开放 CORS。

## 许可证

MIT