Skip to content

代理服务器配置

OmniBox 是一个纯前端应用,数据来源于第三方采集站。由于浏览器的同源策略限制,直接访问这些第三方 API 会遇到 跨域请求(CORS) 问题。因此需要配置一个代理服务器来转发请求,解决跨域限制。

为什么需要代理服务器?

跨域问题

浏览器出于安全考虑,实施了同源策略(Same-Origin Policy),限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

当 OmniBox 前端应用(例如部署在 https://omnibox.example.com)尝试直接访问第三方采集站 API(例如 https://api.collector.com)时,浏览器会阻止这个请求,因为它们的源不同。

代理服务器的作用

代理服务器作为中间层,接收来自 OmniBox 的请求,然后转发到目标 API,并将响应返回给 OmniBox。由于代理服务器和 OmniBox 可以部署在同一个域下,或者代理服务器设置了正确的 CORS 头,因此可以绕过浏览器的同源策略限制。

快速部署方案

我们提供了多种代理服务器部署方案,您可以根据自己的需求选择:

方案平台难度性能成本推荐指数
Express 本地服务器本地/VPS⭐⭐⭐⭐⭐⭐免费/低⭐⭐⭐⭐⭐
Deno Deploy云端⭐⭐⭐⭐⭐⭐⭐免费⭐⭐⭐⭐⭐
Cloudflare Workers云端⭐⭐⭐⭐⭐⭐⭐⭐免费⭐⭐⭐⭐
Vercel Edge Functions云端⭐⭐⭐⭐⭐⭐⭐免费⭐⭐⭐⭐
Deno 本地运行本地⭐⭐⭐免费⭐⭐⭐

🎯 推荐方案选择

  • 🏠 本地开发: Express 本地服务器 - 功能完整,稳定可靠
  • ☁️ 云端部署: Deno Deploy - 零配置,全球 CDN 加速
  • 🌐 全球加速: Cloudflare Workers - 极低延迟,边缘计算
  • ⚡ 零配置: Vercel Edge Functions - 与 Next.js 完美集成

配置代理地址

方法一:JSON 数据配置

在 OmniBox 初始化界面的 "JSON数据" 标签页中输入:

json
{
  "PROXY_BASE_URL": "https://your-proxy-domain.com/proxy/"
}

方法二:上传配置文件

创建一个 config.json 文件并上传:

json
{
  "PROXY_BASE_URL": "https://your-proxy-domain.com/proxy/"
}

常见代理地址格式示例

bash
# Deno Deploy
https://your-project.deno.dev/proxy/

# Cloudflare Workers
https://your-worker.your-subdomain.workers.dev/proxy/

# Vercel
https://your-app.vercel.app/api/proxy/

# 本地服务器
http://localhost:8080/proxy/

重要提示

代理地址必须以 /proxy/ 结尾,这是 OmniBox 识别代理路径的关键。

部署指南

1. Express 本地服务器

适合本地开发或拥有 VPS 的用户。

部署步骤

  1. 克隆代理服务器代码

    bash
    git clone https://github.com/Lampon/OmniBox.git
    cd OmniBox/server
  2. 安装依赖

    bash
    npm install
  3. 启动服务器

    bash
    npm start
  4. 配置 OmniBox

    • 代理地址:http://localhost:8080/proxy/
    • 或使用 VPS 公网 IP:http://your-vps-ip:8080/proxy/

使用 PM2 保持运行

bash
npm install -g pm2
pm2 start server.js --name omnibox-proxy
pm2 save
pm2 startup

2. Deno Deploy

Deno Deploy 提供免费的边缘计算服务,全球 CDN 加速。

部署步骤

  1. 访问 Deno Deploy

  2. 部署代理代码

    • 参考项目中的 deploy-proxy/deno-deploy 目录
    • 复制代码到 Deno Deploy
    • 点击部署
  3. 获取代理地址

    • 部署完成后获得类似 https://your-project.deno.dev 的地址
    • 代理地址为:https://your-project.deno.dev/proxy/

3. Cloudflare Workers

Cloudflare Workers 提供全球边缘计算,延迟极低。

部署步骤

  1. 安装 Wrangler CLI

    bash
    npm install -g wrangler
  2. 登录 Cloudflare

    bash
    wrangler login
  3. 部署 Worker

    bash
    cd deploy-proxy/cloudflare-workers
    wrangler deploy
  4. 获取代理地址

    • 部署完成后获得 Worker 地址
    • 代理地址为:https://your-worker.your-subdomain.workers.dev/proxy/

4. Vercel Edge Functions

Vercel Edge Functions 提供边缘计算功能。

部署步骤

  1. 创建 Vercel 项目

    bash
    npm install -g vercel
    vercel
  2. 部署代理代码

    • 参考项目中的 deploy-proxy/vercel 目录
    • 将代码部署到 Vercel
  3. 获取代理地址

    • 部署完成后获得 Vercel 应用地址
    • 代理地址为:https://your-app.vercel.app/api/proxy/

测试代理功能

部署完成后,可以通过以下方式测试代理是否正常工作:

测试方法

访问以下地址测试代理:

https://your-proxy-domain.com/proxy/https://httpbin.org/get

如果返回 JSON 格式的响应数据,说明代理服务器工作正常。

测试脚本

bash
curl "https://your-proxy-domain.com/proxy/https://httpbin.org/get"

应该返回类似以下内容:

json
{
  "args": {},
  "headers": {
    "Host": "httpbin.org",
    ...
  },
  "origin": "...",
  "url": "https://httpbin.org/get"
}

故障排除

问题:代理服务器无法访问

可能原因

  • 代理服务器未启动
  • 代理地址格式错误
  • 防火墙阻止访问

解决方案

  1. 检查代理服务器是否正常运行
  2. 确认代理地址格式正确(必须以 /proxy/ 结尾)
  3. 验证防火墙设置
  4. 尝试在浏览器中直接访问代理地址

问题:仍然出现跨域错误

可能原因

  • 代理服务器未启用 CORS
  • 代理服务器配置错误

解决方案

  1. 确认代理服务器已启用 CORS
  2. 检查代理服务器日志
  3. 尝试更换代理服务器
  4. 清除浏览器缓存后重试

问题:请求超时

可能原因

  • 网络连接问题
  • 目标采集站无法访问
  • 代理服务器性能问题

解决方案

  1. 检查网络连接
  2. 尝试更换代理服务器地址
  3. 检查目标采集站是否可访问
  4. 增加请求超时时间

问题:代理返回 502 错误

可能原因

  • 目标服务器无法访问
  • 代理服务器配置错误

解决方案

  1. 检查目标 URL 是否正确
  2. 确认目标服务器可访问
  3. 查看代理服务器日志
  4. 检查代理服务器配置

高级配置

自定义请求头

某些采集站可能需要特定的请求头,可以在代理服务器中配置:

javascript
// Express 示例
app.use('/proxy', (req, res) => {
  const targetUrl = req.url.replace('/proxy/', '');
  const headers = {
    'User-Agent': 'Mozilla/5.0 ...',
    'Referer': 'https://example.com',
    // 添加其他需要的请求头
  };
  // ... 转发请求
});

请求缓存

为了提高性能,可以添加请求缓存:

javascript
const cache = new Map();

app.use('/proxy', async (req, res) => {
  const cacheKey = req.url;
  if (cache.has(cacheKey)) {
    return res.json(cache.get(cacheKey));
  }
  // ... 转发请求并缓存结果
});

请求限流

为了防止滥用,可以添加请求限流:

javascript
const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 分钟
  max: 100 // 限制 100 次请求
});

app.use('/proxy', limiter);

下一步

基于 MIT 许可发布