method_test.html•5.85 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>405 Error Fix Test</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f8f9fa;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
button {
background: #007bff;
color: white;
border: none;
padding: 12px 24px;
margin: 8px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
button:hover { background: #0056b3; }
.result {
margin: 15px 0;
padding: 15px;
border-radius: 5px;
font-family: monospace;
}
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
.info { background: #d1ecf1; color: #0c5460; }
h1 { color: #333; text-align: center; }
.method-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>🔧 405 Error Fix Test</h1>
<p>Testing different HTTP methods to ensure 405 errors are resolved.</p>
<div class="method-grid">
<button onclick="testGET()">Test GET</button>
<button onclick="testPOST()">Test POST</button>
<button onclick="testOPTIONS()">Test OPTIONS</button>
<button onclick="testAll()">Test All Methods</button>
</div>
<button onclick="clearResults()">Clear Results</button>
<div id="results"></div>
</div>
<script>
function addResult(message, type = 'info') {
const results = document.getElementById('results');
const div = document.createElement('div');
div.className = `result ${type}`;
div.innerHTML = `<strong>${new Date().toLocaleTimeString()}:</strong> ${message}`;
results.appendChild(div);
}
function clearResults() {
document.getElementById('results').innerHTML = '';
}
async function testGET() {
addResult('🔍 Testing GET /api/health...', 'info');
try {
const response = await fetch('http://localhost:8000/api/health', {
method: 'GET'
});
if (response.ok) {
const data = await response.json();
addResult(`✅ GET Success: ${response.status} - MongoDB: ${data.mongodb}`, 'success');
} else {
addResult(`❌ GET Failed: ${response.status}`, 'error');
}
} catch (error) {
addResult(`❌ GET Error: ${error.message}`, 'error');
}
}
async function testPOST() {
addResult('📤 Testing POST /api/health...', 'info');
try {
const response = await fetch('http://localhost:8000/api/health', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
const data = await response.json();
addResult(`✅ POST Success: ${response.status} - MongoDB: ${data.mongodb}`, 'success');
} else {
addResult(`❌ POST Failed: ${response.status}`, 'error');
}
} catch (error) {
addResult(`❌ POST Error: ${error.message}`, 'error');
}
}
async function testOPTIONS() {
addResult('🔧 Testing OPTIONS /api/health...', 'info');
try {
const response = await fetch('http://localhost:8000/api/health', {
method: 'OPTIONS'
});
addResult(`✅ OPTIONS Response: ${response.status}`, response.ok ? 'success' : 'error');
// Check CORS headers
const corsOrigin = response.headers.get('access-control-allow-origin');
const corsMethods = response.headers.get('access-control-allow-methods');
addResult(`🌐 CORS Origin: ${corsOrigin || 'Not set'}`, corsOrigin ? 'success' : 'error');
addResult(`🔧 CORS Methods: ${corsMethods || 'Not set'}`, corsMethods ? 'success' : 'error');
} catch (error) {
addResult(`❌ OPTIONS Error: ${error.message}`, 'error');
}
}
async function testAll() {
addResult('🚀 Running comprehensive method test...', 'info');
await testGET();
await new Promise(resolve => setTimeout(resolve, 500));
await testPOST();
await new Promise(resolve => setTimeout(resolve, 500));
await testOPTIONS();
addResult('🎉 All method tests completed!', 'info');
}
// Auto-run test on page load
window.addEventListener('load', function() {
addResult('🚀 Page loaded, running auto-test...', 'info');
setTimeout(testAll, 1000);
});
</script>
</body>
</html>