146 lines
6.2 KiB
HTML
146 lines
6.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>
|
||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; padding: 20px; }
|
||
.section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
|
||
.debug { background: #f0f0f0; padding: 10px; border-radius: 5px; font-family: monospace; white-space: pre-wrap; }
|
||
button { padding: 10px 20px; margin: 5px; border: none; border-radius: 5px; background: #007bff; color: white; cursor: pointer; }
|
||
.error { color: red; }
|
||
.success { color: green; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="section">
|
||
<h2>前端配置测试</h2>
|
||
<button onclick="testConfig()">测试配置</button>
|
||
<div id="result" class="debug">点击按钮开始测试...</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 复制upload.html的配置
|
||
const SUPABASE_URL = 'https://amiap.hzau.edu.cn/supa';
|
||
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzYzODAyNjY5LCJleHAiOjIwNzkxNjI2Njl9.ltGXvQKpguLaf8Vzomn310hLgOZbrjqZT-F3rR00ulg';
|
||
|
||
const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
|
||
|
||
console.log('🌐 当前环境:', isLocalhost ? '本地测试' : '生产环境');
|
||
console.log('🔗 Supabase URL:', SUPABASE_URL);
|
||
|
||
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
||
|
||
async function testConfig() {
|
||
const resultDiv = document.getElementById('result');
|
||
resultDiv.textContent = '测试中...';
|
||
|
||
try {
|
||
console.log('🧪 开始配置测试...');
|
||
|
||
// 1. 测试存储桶列表
|
||
console.log('1️⃣ 测试存储桶列表...');
|
||
const { data: buckets, error: bucketError } = await supabase.storage.listBuckets();
|
||
|
||
if (bucketError) {
|
||
throw new Error(`存储桶列表失败: ${bucketError.message}`);
|
||
}
|
||
|
||
console.log('✅ 存储桶列表成功:', buckets.length, '个存储桶');
|
||
const bucketNames = buckets.map(b => b.name);
|
||
|
||
// 2. 测试认证
|
||
console.log('2️⃣ 测试认证状态...');
|
||
const { data: { session }, error: authError } = await supabase.auth.getSession();
|
||
|
||
if (authError) {
|
||
console.warn('⚠️ 认证错误:', authError.message);
|
||
}
|
||
|
||
const hasAuth = !!session;
|
||
const token = hasAuth ? session.access_token : SUPABASE_ANON_KEY;
|
||
console.log(hasAuth ? '✅ 已登录' : '🔓 使用匿名模式');
|
||
|
||
// 3. 测试TUS上传创建
|
||
console.log('3️⃣ 测试TUS上传创建...');
|
||
if (buckets.length === 0) {
|
||
throw new Error('没有可用的存储桶');
|
||
}
|
||
|
||
const testBucket = buckets[0].name;
|
||
console.log('🎯 使用存储桶:', testBucket);
|
||
|
||
// 准备元数据
|
||
const metadata = {
|
||
bucketName: btoa(testBucket),
|
||
objectName: btoa(`config-test-${Date.now()}.txt`),
|
||
contentType: btoa('text/plain'),
|
||
cacheControl: btoa('3600')
|
||
};
|
||
|
||
const headers = {
|
||
'Authorization': `Bearer ${token}`,
|
||
'apikey': SUPABASE_ANON_KEY,
|
||
'Content-Type': 'application/offset+octet-stream',
|
||
'Tus-Resumable': '1.0.0',
|
||
'Upload-Length': '100',
|
||
'Upload-Metadata': Object.entries(metadata).map(([k, v]) => `${k} ${v}`).join(','),
|
||
'x-upsert': 'true'
|
||
};
|
||
|
||
console.log('📤 发送TUS请求...');
|
||
const response = await fetch(`${SUPABASE_URL}/storage/v1/upload/resumable`, {
|
||
method: 'POST',
|
||
headers: headers
|
||
});
|
||
|
||
console.log('📊 TUS响应状态:', response.status, response.statusText);
|
||
const responseText = await response.text();
|
||
|
||
// 4. 生成测试报告
|
||
const report = {
|
||
timestamp: new Date().toISOString(),
|
||
environment: isLocalhost ? '本地测试' : '生产环境',
|
||
supabaseUrl: SUPABASE_URL,
|
||
anonKey: SUPABASE_ANON_KEY.substring(0, 20) + '...',
|
||
buckets: {
|
||
count: buckets.length,
|
||
names: bucketNames
|
||
},
|
||
authentication: {
|
||
hasSession: hasAuth,
|
||
tokenType: hasAuth ? 'JWT' : '匿名',
|
||
tokenPreview: token.substring(0, 20) + '...'
|
||
},
|
||
tusTest: {
|
||
status: response.status,
|
||
statusText: response.statusText,
|
||
response: responseText || '空响应',
|
||
success: response.status === 201,
|
||
location: response.headers.get('Location') || '无Location头'
|
||
}
|
||
};
|
||
|
||
console.log('✅ 测试完成!');
|
||
resultDiv.textContent = JSON.stringify(report, null, 2);
|
||
|
||
// 高亮显示结果
|
||
if (response.status === 201) {
|
||
resultDiv.innerHTML = resultDiv.innerHTML.replace('tusTest', '🎉 tusTest');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('❌ 测试失败:', error);
|
||
resultDiv.innerHTML = `<span class="error">❌ 测试失败: ${error.message}</span>`;
|
||
}
|
||
}
|
||
|
||
// 页面加载时自动测试
|
||
window.addEventListener('load', () => {
|
||
console.log('🔍 前端配置测试页面加载完成');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |