60 lines
2.2 KiB
HTML
60 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Testeur CORS</title>
|
|
<style>
|
|
body { font-family: sans-serif; padding: 20px; }
|
|
h1 { color: #333; }
|
|
h2 { font-size: 1.1em; color: #666; }
|
|
button { font-size: 1.2em; padding: 10px; }
|
|
#result {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
border: 1px solid #ccc;
|
|
background-color: #f4f4f4;
|
|
white-space: pre-wrap; /* Pour afficher le JSON formaté */
|
|
}
|
|
.success { border-color: green; background-color: #e9f9e9; }
|
|
.error { border-color: red; background-color: #f9e9e9; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Testeur d'API (Client)</h1>
|
|
<h2>Cette page tourne sur <code id="origin-display">Détection...</code></h2>
|
|
|
|
<button id="testButton">Appeler l'API (sur <code>http://localhost:3000</code>)</button>
|
|
|
|
<h3>Résultat de l'appel :</h3>
|
|
<pre id="result">En attente de l'appel...</pre>
|
|
|
|
<script>
|
|
const API_URL = 'http://localhost:3000/test-cors'; // L'URL de notre API
|
|
const L_ORIGINE_DE_CETTE_PAGE = window.location.origin;
|
|
document.getElementById('origin-display').textContent = L_ORIGINE_DE_CETTE_PAGE;
|
|
document.getElementById('testButton').addEventListener('click', () => {
|
|
const resultEl = document.getElementById('result');
|
|
resultEl.textContent = 'Chargement...';
|
|
resultEl.className = '';
|
|
|
|
fetch(API_URL)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Réponse réseau non-OK (code ' + response.status + ')');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
resultEl.textContent = JSON.stringify(data, null, 2);
|
|
resultEl.className = 'success';
|
|
})
|
|
.catch(error => {
|
|
// C'est ici qu'on verra l'erreur CORS !
|
|
resultEl.textContent = 'ERREUR: ' + error.message + '\n\n(Regardez la console du navigateur (F12) pour voir le détail de l\'erreur CORS)';
|
|
resultEl.className = 'error';
|
|
console.error('Erreur de fetch:', error);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |