📖 使用方法
JavaScript Fetch - 查询参数方式（推荐）
fetch('https://corsproxy.afjs.dev/raw?url=' + encodeURIComponent('https://api.example.com/data'))
.then(response => response.json())
.then(data => console.log(data));
JavaScript Fetch - 路径方式
fetch('https://corsproxy.afjs.dev/https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
jQuery - 查询参数方式
$.get('https://corsproxy.afjs.dev/raw?url=' + encodeURIComponent('https://api.example.com/data'), function(data) {
console.log(data);
});
Axios - 查询参数方式
const targetUrl = 'https://api.example.com/data';
axios.get('https://corsproxy.afjs.dev/raw?url=' + encodeURIComponent(targetUrl))
.then(response => console.log(response.data));
与 snapDOM 一起使用
使用 CORS 代理解决 snapDOM 截图时的跨域图片问题：
import snapdom from '@zumer/snapdom';
// 配置代理选项
const snapOptions = {
useProxy: 'https://corsproxy.afjs.dev', // 使用此代理服务
embedFonts: true,
iconFonts: ['FontAwesome', 'Material Icons']
};
// 截图包含跨域图片的元素
const element = document.querySelector('#my-element');
const imageBlob = await snapdom.toPng(element, snapOptions);
// 下载图片
const url = URL.createObjectURL(imageBlob);
const a = document.createElement('a');
a.href = url;
a.download = 'screenshot.png';
a.click();
🎯 在线演示
点击下方按钮，体验 snapDOM + CORS 代理的强大组合：
📸 演示内容区域
这个区域包含了一些样式和跨域图片，用于测试 snapDOM 的截图功能。
📊 这里有一些文本内容
- ✅ 支持复杂样式
- 🎨 保留原始布局
- 🖼️ 处理跨域图片
snapDOM 高级用法
// 可重复使用的捕获配置
const capture = snapdom(element, {
useProxy: 'https://corsproxy.afjs.dev',
scale: 2, // 高清截图
width: 1200, // 固定宽度
embedFonts: true,
excludeFonts: {
families: ['Heavy-Font'], // 排除重型字体
domains: ['slow-cdn.com'] // 排除慢速域名
}
});
// 导出为不同格式
const pngBlob = await capture.toPng();
const jpgBlob = await capture.toJpg({ quality: 0.9 });
const svgString = await capture.toSvg();