Created
August 8, 2025 08:56
-
-
Save QYG2297248353/6a191f414337c31bb3410efaa2a5e864 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 { | |
| padding: 10px; | |
| margin: 10px 0; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| 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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>登录测试</h2> | |
| <form id="loginForm"> | |
| <label>用户名:</label> | |
| <input type="text" id="username" value="root" required /> | |
| <label>密码:</label> | |
| <input type="password" id="password" value="xxxxx" required /> | |
| <label>记住我:</label> | |
| <input type="checkbox" id="rememberMe" checked /> 选中 | |
| <button type="submit">登录</button> | |
| </form> | |
| <h3>响应结果:</h3> | |
| <pre id="result">等待响应...</pre> | |
| </div> | |
| <script> | |
| document | |
| .getElementById("loginForm") | |
| .addEventListener("submit", async function (e) { | |
| e.preventDefault(); | |
| const username = document.getElementById("username").value; | |
| const password = document.getElementById("password").value; | |
| const rememberMe = document.getElementById("rememberMe").checked; | |
| const resultEl = document.getElementById("result"); | |
| resultEl.textContent = "请求中..."; | |
| resultEl.className = ""; | |
| try { | |
| const response = await fetch( | |
| "https://baidu.com/auth/login?rememberMe=" + rememberMe, | |
| { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| // 注意：如果你的接口需要其他 header（如 token），在这里加 | |
| }, | |
| body: JSON.stringify({ username, password }), | |
| // 允许携带 cookies（如果后端使用 session） | |
| credentials: "include", | |
| } | |
| ); | |
| let data; | |
| const contentType = response.headers.get("content-type"); | |
| if (contentType && contentType.includes("application/json")) { | |
| data = await response.json(); | |
| } else { | |
| data = await response.text(); | |
| } | |
| if (response.ok) { | |
| resultEl.textContent = | |
| "✅ 成功:\n" + JSON.stringify(data, null, 2); | |
| resultEl.className = "success"; | |
| } else { | |
| resultEl.textContent = | |
| `❌ 失败 [${response.status}]:\n` + | |
| JSON.stringify(data, null, 2); | |
| resultEl.className = "error"; | |
| } | |
| } catch (error) { | |
| console.error("请求错误:", 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