124 lines
5.0 KiB
HTML
124 lines
5.0 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>直接CORS测试</title>
|
||
<style>
|
||
body { font-family: 'Microsoft YaHei', sans-serif; padding: 20px; }
|
||
.test-button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; margin: 5px; cursor: pointer; }
|
||
.test-button:hover { background: #0056b3; }
|
||
.result { margin: 10px 0; padding: 15px; border-radius: 5px; background: #f8f9fa; }
|
||
.success { background: #d4edda; color: #155724; }
|
||
.error { background: #f8d7da; color: #721c24; }
|
||
.info { background: #d1ecf1; color: #0c5460; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🔥 直接CORS测试</h1>
|
||
<p>在浏览器中直接测试API的CORS配置</p>
|
||
|
||
<div>
|
||
<button class="test-button" onclick="testCORSEndpoint()">测试CORS专用端点</button>
|
||
<button class="test-button" onclick="testStoresEndpoint()">测试/api/stores</button>
|
||
<button class="test-button" onclick="testHealthEndpoint()">测试/api/health</button>
|
||
<button class="test-button" onclick="clearResults()">清空结果</button>
|
||
</div>
|
||
|
||
<div id="results"></div>
|
||
|
||
<script>
|
||
const API_BASE = 'http://127.0.0.1:5000';
|
||
const resultsDiv = document.getElementById('results');
|
||
|
||
function addResult(message, type = 'info') {
|
||
const div = document.createElement('div');
|
||
div.className = `result ${type}`;
|
||
div.innerHTML = message;
|
||
resultsDiv.appendChild(div);
|
||
resultsDiv.scrollTop = resultsDiv.scrollHeight;
|
||
}
|
||
|
||
function clearResults() {
|
||
resultsDiv.innerHTML = '';
|
||
}
|
||
|
||
async function testCORSEndpoint() {
|
||
addResult('🧪 测试CORS专用端点...', 'info');
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/cors-test`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json'
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
addResult(`✅ CORS测试成功！<br>状态: ${data.status}<br>消息: ${data.message}<br>来源: ${data.origin}`, 'success');
|
||
} else {
|
||
addResult(`❌ CORS测试失败: HTTP ${response.status}`, 'error');
|
||
}
|
||
} catch (error) {
|
||
addResult(`❌ CORS测试异常: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function testStoresEndpoint() {
|
||
addResult('🏪 测试/api/stores端点...', 'info');
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/stores`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json'
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
addResult(`✅ /api/stores 成功！<br>返回数据: ${JSON.stringify(data).substring(0, 200)}...`, 'success');
|
||
} else {
|
||
const errorText = await response.text();
|
||
addResult(`❌ /api/stores 失败: HTTP ${response.status}<br>错误: ${errorText.substring(0, 200)}`, 'error');
|
||
}
|
||
} catch (error) {
|
||
addResult(`❌ /api/stores 异常: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async function testHealthEndpoint() {
|
||
addResult('❤️ 测试/api/health端点...', 'info');
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/health`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json'
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
addResult(`✅ /api/health 成功！<br>状态: ${data.status}`, 'success');
|
||
} else {
|
||
addResult(`❌ /api/health 失败: HTTP ${response.status}`, 'error');
|
||
}
|
||
} catch (error) {
|
||
addResult(`❌ /api/health 异常: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// 页面加载时显示说明
|
||
window.onload = function() {
|
||
addResult('📝 页面已加载，点击按钮开始测试CORS配置', 'info');
|
||
addResult(`🎯 测试目标: ${API_BASE}`, 'info');
|
||
addResult('💡 如果出现CORS错误，请检查浏览器开发者工具的控制台和网络选项卡', 'info');
|
||
};
|
||
</script>
|
||
</body>
|
||
</html> |