Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>My static Space</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h1>HTTP GET Client</h1> | |
| <div class="input-group"> | |
| <input type="url" id="urlInput" placeholder="Enter URL (e.g., https://api.example.com/data)" /> | |
| <button onclick="makeRequest()">GET</button> | |
| </div> | |
| <div id="response" class="response-container"></div> | |
| </div> | |
| <script> | |
| async function makeRequest() { | |
| const url = document.getElementById('urlInput').value; | |
| const responseDiv = document.getElementById('response'); | |
| if (!url) { | |
| responseDiv.innerHTML = '<div class="error">Please enter a URL</div>'; | |
| return; | |
| } | |
| try { | |
| responseDiv.innerHTML = '<div class="loading">Loading...</div>'; | |
| const response = await fetch(url); | |
| const data = await response.text(); | |
| responseDiv.innerHTML = ` | |
| <div class="status">Status: ${response.status} ${response.statusText}</div> | |
| <div class="headers"> | |
| <h3>Headers:</h3> | |
| <pre>${JSON.stringify(Object.fromEntries(response.headers), null, 2)}</pre> | |
| </div> | |
| <div class="body"> | |
| <h3>Response Body:</h3> | |
| <pre>${data}</pre> | |
| </div> | |
| `; | |
| } catch (error) { | |
| let errorMessage = error.message; | |
| if (error.message.includes('Failed to fetch') || error.name === 'TypeError') { | |
| errorMessage = `CORS Error: ${error.message}. The server may not allow cross-origin requests from this domain.`; | |
| } | |
| responseDiv.innerHTML = `<div class="error">Error: ${errorMessage}</div>`; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |