Created
August 12, 2025 08:52
-
-
Save QYG2297248353/29bea54014d0ab3866e693da8233c114 to your computer and use it in GitHub Desktop.
跨域请求测试
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>本地请求测试</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| background: #f4f4f4; | |
| } | |
| .container { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| background: white; | |
| padding: 30px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| input, | |
| button, | |
| select, | |
| textarea { | |
| padding: 10px; | |
| margin: 10px 0; | |
| width: 100%; | |
| box-sizing: border-box; | |
| font-family: inherit; | |
| } | |
| button { | |
| background: #007cba; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: #005a87; | |
| } | |
| pre { | |
| background: #eee; | |
| padding: 10px; | |
| border-radius: 4px; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .error { | |
| color: red; | |
| } | |
| .success { | |
| color: green; | |
| } | |
| label { | |
| font-weight: bold; | |
| display: block; | |
| margin-top: 15px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>请求测试</h2> | |
| <form id="requestForm"> | |
| <label for="url">请求地址:</label> | |
| <input | |
| type="text" | |
| id="url" | |
| value="" | |
| placeholder="http://localhost:8080/api/test" | |
| required | |
| /> | |
| <label for="method">请求方式:</label> | |
| <select id="method" required> | |
| <option value="GET">GET</option> | |
| <option value="POST">POST</option> | |
| </select> | |
| <label for="postBody" id="postBodyLabel" style="display: none" | |
| >POST 请求体（JSON）:</label | |
| > | |
| <textarea | |
| id="postBody" | |
| rows="6" | |
| style="display: none" | |
| placeholder='例如：{"key":"value"}' | |
| ></textarea> | |
| <button type="submit">发送请求</button> | |
| </form> | |
| <h3>响应结果:</h3> | |
| <pre id="result">等待响应...</pre> | |
| </div> | |
| <script> | |
| const methodSelect = document.getElementById("method"); | |
| const postBody = document.getElementById("postBody"); | |
| const postBodyLabel = document.getElementById("postBodyLabel"); | |
| // 切换请求方式时显示或隐藏 POST 请求体输入框 | |
| methodSelect.addEventListener("change", () => { | |
| if (methodSelect.value === "POST") { | |
| postBody.style.display = "block"; | |
| postBodyLabel.style.display = "block"; | |
| } else { | |
| postBody.style.display = "none"; | |
| postBodyLabel.style.display = "none"; | |
| } | |
| }); | |
| document | |
| .getElementById("requestForm") | |
| .addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const url = document.getElementById("url").value.trim(); | |
| const method = methodSelect.value; | |
| const resultEl = document.getElementById("result"); | |
| resultEl.textContent = "请求中..."; | |
| resultEl.className = ""; | |
| try { | |
| let options = { | |
| method, | |
| headers: {}, | |
| credentials: "include", // 需要携带 cookie 可以保留 | |
| }; | |
| if (method === "POST") { | |
| const rawBody = postBody.value.trim(); | |
| if (rawBody) { | |
| // 尝试解析 JSON，校验格式 | |
| try { | |
| JSON.parse(rawBody); | |
| } catch (err) { | |
| resultEl.textContent = "❌ 请求体不是有效的 JSON 格式"; | |
| resultEl.className = "error"; | |
| return; | |
| } | |
| options.headers["Content-Type"] = "application/json"; | |
| options.body = rawBody; | |
| } else { | |
| // POST 但没有请求体，警告但继续请求空体 | |
| options.headers["Content-Type"] = "application/json"; | |
| options.body = "{}"; | |
| } | |
| } | |
| const response = await fetch(url, options); | |
| let data; | |
| const contentType = response.headers.get("content-type"); | |
| if (contentType && contentType.includes("application/json")) { | |
| data = await response.json(); | |
| data = JSON.stringify(data, null, 2); | |
| } else { | |
| data = await response.text(); | |
| } | |
| if (response.ok) { | |
| resultEl.textContent = "✅ 成功:\n" + data; | |
| resultEl.className = "success"; | |
| } else { | |
| resultEl.textContent = `❌ 失败 [${response.status}]:\n` + data; | |
| resultEl.className = "error"; | |
| } | |
| } catch (error) { | |
| resultEl.textContent = | |
| "❌ 请求失败:\n" + | |
| error.message + | |
| "\n\n请检查：\n1. CORS 是否已正确配置\n2. 是否被浏览器阻止\n3. 网络是否可达"; | |
| resultEl.className = "error"; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment