237 lines
8.2 KiB
HTML
237 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>购物车请求调试工具</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
padding: 20px;
|
||
}
|
||
.section {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
}
|
||
button {
|
||
padding: 10px 20px;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
background: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
}
|
||
button:hover {
|
||
background: #45a049;
|
||
}
|
||
.log {
|
||
background: #f5f5f5;
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
white-space: pre-wrap;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
}
|
||
.success { color: green; }
|
||
.error { color: red; }
|
||
.info { color: blue; }
|
||
input {
|
||
width: 100%;
|
||
padding: 8px;
|
||
margin: 5px 0;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🔧 购物车请求调试工具</h1>
|
||
|
||
<div class="section">
|
||
<h2>1. 环境信息</h2>
|
||
<div id="envInfo" class="log"></div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>2. 配置 API 地址</h2>
|
||
<input type="text" id="apiUrl" placeholder="输入 API 地址，例如：http://104.244.91.212:8060/api/v1" value="http://104.244.91.212:8060/api/v1">
|
||
<input type="text" id="token" placeholder="输入 Token（从 localStorage 获取）">
|
||
<button onclick="loadToken()">从 localStorage 加载 Token</button>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>3. 测试接口</h2>
|
||
<button onclick="testHealth()">测试健康检查</button>
|
||
<button onclick="testBanners()">测试轮播图（无需认证）</button>
|
||
<button onclick="testCart()">测试购物车（需要认证）</button>
|
||
<button onclick="testCORS()">测试 CORS 预检</button>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>4. 请求日志</h2>
|
||
<button onclick="clearLog()">清空日志</button>
|
||
<div id="log" class="log"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// 显示环境信息
|
||
function showEnvInfo() {
|
||
const info = {
|
||
'当前页面': window.location.href,
|
||
'协议': window.location.protocol,
|
||
'主机名': window.location.hostname,
|
||
'端口': window.location.port,
|
||
'用户代理': navigator.userAgent,
|
||
'localStorage Token': localStorage.getItem('currentUser') ? '已存在' : '不存在'
|
||
};
|
||
|
||
let html = '';
|
||
for (let [key, value] of Object.entries(info)) {
|
||
html += `<div><strong>${key}:</strong> ${value}</div>`;
|
||
}
|
||
document.getElementById('envInfo').innerHTML = html;
|
||
}
|
||
|
||
// 加载 Token
|
||
function loadToken() {
|
||
try {
|
||
const user = localStorage.getItem('currentUser');
|
||
if (user) {
|
||
const userData = JSON.parse(user);
|
||
document.getElementById('token').value = userData.token || '';
|
||
log('✓ Token 已加载', 'success');
|
||
} else {
|
||
log('✗ localStorage 中没有找到用户信息', 'error');
|
||
}
|
||
} catch (e) {
|
||
log('✗ 加载 Token 失败: ' + e.message, 'error');
|
||
}
|
||
}
|
||
|
||
// 日志函数
|
||
function log(message, type = 'info') {
|
||
const logDiv = document.getElementById('log');
|
||
const time = new Date().toLocaleTimeString();
|
||
logDiv.innerHTML += `<div class="${type}">[${time}] ${message}</div>`;
|
||
logDiv.scrollTop = logDiv.scrollHeight;
|
||
}
|
||
|
||
function clearLog() {
|
||
document.getElementById('log').innerHTML = '';
|
||
}
|
||
|
||
// 通用请求函数
|
||
async function makeRequest(url, options = {}) {
|
||
log(`\n========== 开始请求 ==========`, 'info');
|
||
log(`URL: ${url}`, 'info');
|
||
log(`Method: ${options.method || 'GET'}`, 'info');
|
||
|
||
if (options.headers) {
|
||
log(`Headers: ${JSON.stringify(options.headers, null, 2)}`, 'info');
|
||
}
|
||
|
||
try {
|
||
const startTime = Date.now();
|
||
const response = await fetch(url, options);
|
||
const duration = Date.now() - startTime;
|
||
|
||
log(`\n响应状态: ${response.status} ${response.statusText}`,
|
||
response.ok ? 'success' : 'error');
|
||
log(`响应时间: ${duration}ms`, 'info');
|
||
|
||
// 显示响应头
|
||
log(`\n响应头:`, 'info');
|
||
response.headers.forEach((value, key) => {
|
||
log(` ${key}: ${value}`, 'info');
|
||
});
|
||
|
||
// 获取响应体
|
||
const contentType = response.headers.get('content-type');
|
||
let data;
|
||
if (contentType && contentType.includes('application/json')) {
|
||
data = await response.json();
|
||
log(`\n响应数据:\n${JSON.stringify(data, null, 2)}`, 'success');
|
||
} else {
|
||
data = await response.text();
|
||
log(`\n响应数据:\n${data}`, 'info');
|
||
}
|
||
|
||
log(`========== 请求完成 ==========\n`, 'info');
|
||
return { ok: response.ok, status: response.status, data };
|
||
} catch (error) {
|
||
log(`\n✗ 请求失败: ${error.message}`, 'error');
|
||
log(`错误类型: ${error.name}`, 'error');
|
||
log(`错误堆栈: ${error.stack}`, 'error');
|
||
log(`========== 请求失败 ==========\n`, 'error');
|
||
return { ok: false, error: error.message };
|
||
}
|
||
}
|
||
|
||
// 测试健康检查
|
||
async function testHealth() {
|
||
const apiUrl = document.getElementById('apiUrl').value;
|
||
const baseUrl = apiUrl.replace('/api/v1', '');
|
||
await makeRequest(`${baseUrl}/health`);
|
||
}
|
||
|
||
// 测试轮播图
|
||
async function testBanners() {
|
||
const apiUrl = document.getElementById('apiUrl').value;
|
||
await makeRequest(`${apiUrl}/banners`);
|
||
}
|
||
|
||
// 测试购物车
|
||
async function testCart() {
|
||
const apiUrl = document.getElementById('apiUrl').value;
|
||
const token = document.getElementById('token').value;
|
||
|
||
if (!token) {
|
||
log('✗ 请先输入或加载 Token', 'error');
|
||
return;
|
||
}
|
||
|
||
await makeRequest(`${apiUrl}/cart`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`,
|
||
'Content-Type': 'application/json'
|
||
},
|
||
credentials: 'include'
|
||
});
|
||
}
|
||
|
||
// 测试 CORS 预检
|
||
async function testCORS() {
|
||
const apiUrl = document.getElementById('apiUrl').value;
|
||
|
||
log(`\n========== CORS 预检测试 ==========`, 'info');
|
||
log(`这个测试会发送 OPTIONS 请求`, 'info');
|
||
|
||
await makeRequest(`${apiUrl}/cart`, {
|
||
method: 'OPTIONS',
|
||
headers: {
|
||
'Origin': window.location.origin,
|
||
'Access-Control-Request-Method': 'GET',
|
||
'Access-Control-Request-Headers': 'authorization,content-type'
|
||
}
|
||
});
|
||
}
|
||
|
||
// 页面加载时执行
|
||
window.onload = function() {
|
||
showEnvInfo();
|
||
loadToken();
|
||
log('调试工具已就绪', 'success');
|
||
log('请按顺序测试各个接口，观察错误信息', 'info');
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|