如何在无依赖HTML文件中重定向后提取URL中的auth_code？

核心思路 #

利用HTML本身的URL参数读取能力，将回调URL设置为当前HTML文件的本地路径，授权完成后重定向回该文件时，直接通过JS读取URL中的auth_code参数，完全绕开CORS问题，无需依赖后端服务。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>授权辅助工具</title>
</head>
<body>
    <div id="content"></div>

    <script>
        // 从URL中提取指定GET参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 检查当前页面是否带有auth_code参数
        const authCode = getQueryParam('auth_code');

        if (authCode) {
            // 状态：已完成授权，读取到auth_code
            document.getElementById('content').innerHTML = `
                <h3>授权成功</h3>
                <p>获取到授权码：<strong>${authCode}</strong></p>
                <button onclick="fetchTargetInfo()">获取目标信息</button>
            `;
        } else {
            // 状态：未授权，生成授权跳转链接
            const callbackUrl = encodeURIComponent(window.location.href);
            const authorizeUrl = `https://another.domain.com/authorize?redirect_url=${callbackUrl}`;
            
            document.getElementById('content').innerHTML = `
                <h3>请完成授权验证</h3>
                <button onclick="window.location.href='${authorizeUrl}'">点击跳转授权页面</button>
            `;
        }

        // 使用auth_code请求目标信息的函数
        async function fetchTargetInfo() {
            try {
                const response = await fetch('https://another.domain.com/api/your-target-endpoint', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ auth_code: authCode })
                });
                
                if (!response.ok) throw new Error('请求失败');
                const data = await response.json();
                
                document.getElementById('content').innerHTML += `
                    <h3>获取到的信息：</h3>
                    <pre style="background:#f5f5f5; padding:10px; border-radius:4px;">${JSON.stringify(data, null, 2)}</pre>
                `;
            } catch (error) {
                document.getElementById('content').innerHTML += `
                    <p style="color:#dc3545;">信息获取失败：${error.message}</p>
                `;
            }
        }
    </script>
</body>
</html>

关键细节说明 #

• 回调URL处理：直接通过window.location.href获取当前HTML的本地路径，编码后作为授权接口的redirect_url参数，确保授权完成后能精准重定向回工具页面。
• 参数读取逻辑：用URLSearchParams解析当前页面URL的查询参数，完全在浏览器本地执行，不存在跨域访问限制。
• 接口请求注意：如果目标API未配置CORS允许头，纯前端请求会被浏览器拦截——这是浏览器安全策略的硬性限制，可尝试两种临时解决方式：
  • 联系API服务方添加CORS配置，允许file://协议或特定来源访问
  • 使用浏览器CORS禁用插件（仅团队内部测试场景使用，不对外公开）

使用步骤 #

1. 将代码保存为auth-helper.html，存放在本地任意路径
2. 用浏览器打开该文件，点击按钮跳转至授权页面完成验证
3. 授权完成后自动跳转回工具页面，页面会显示获取到的auth_code
4. 点击"获取目标信息"按钮，即可用授权码请求并展示数据

内容的提问来源于stack exchange，提问作者randomDud