46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CORS Understanding Test</title>
|
|
</head>
|
|
<body>
|
|
<h1>CORS Test</h1>
|
|
<div id="results"></div>
|
|
|
|
<script>
|
|
const results = document.getElementById('results');
|
|
|
|
// Test 1: Same-origin request (should work without CORS headers)
|
|
console.log('Current origin:', window.location.origin);
|
|
|
|
// Test what your API client actually does
|
|
const protocol = window.location.protocol;
|
|
const hostname = window.location.hostname;
|
|
|
|
let baseURL;
|
|
if (hostname === 'localhost' || hostname === '127.0.0.1') {
|
|
baseURL = `${protocol}//${hostname}:8000`;
|
|
results.innerHTML += `<p><strong>Development Mode Detected</strong></p>`;
|
|
results.innerHTML += `<p>Frontend: ${window.location.origin}</p>`;
|
|
results.innerHTML += `<p>API: ${baseURL}</p>`;
|
|
results.innerHTML += `<p>This is a <strong>CROSS-ORIGIN</strong> request - CORS applies!</p>`;
|
|
} else {
|
|
baseURL = `${protocol}//${hostname}/api`;
|
|
results.innerHTML += `<p><strong>Production Mode Detected</strong></p>`;
|
|
results.innerHTML += `<p>Frontend: ${window.location.origin}</p>`;
|
|
results.innerHTML += `<p>API: ${baseURL}</p>`;
|
|
results.innerHTML += `<p>This is a <strong>SAME-ORIGIN</strong> request - NO CORS needed!</p>`;
|
|
}
|
|
|
|
// Test the actual request
|
|
fetch(`${baseURL}/health`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
results.innerHTML += `<p style="color: green;">✅ API Request Successful: ${JSON.stringify(data)}</p>`;
|
|
})
|
|
.catch(error => {
|
|
results.innerHTML += `<p style="color: red;">❌ API Request Failed: ${error.message}</p>`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |