如何在JavaScript中获取重定向后URL的参数值

你之前的两个方案失败的核心原因如下：

• 第一个方案：fetch 接口默认跟随重定向，但浏览器不会向JS暴露跨域请求的最终重定向地址，且你调用的window.location.search读取的是你当前打开页面的地址，而非fetch请求的最终目标地址，因此返回undefined
• 第二个方案：仅解析了初始请求的URL，没有跟进重定向逻辑，初始URL本身就没有code参数，自然无法拿到

根据你的使用场景选择对应方案：

场景1：你可控制回调地址 https://www.secondwebsite.com 的页面代码 #

这是OAuth2授权码流最常规的使用场景，直接在secondwebsite.com的页面脚本中加入以下代码即可：

const queryParams = new URLSearchParams(window.location.search)
const authCode = queryParams.get('code')
if (authCode) {
  // 此处可添加用code换access_token等后续业务逻辑
  console.log('获取到的授权码：', authCode)
}

当用户从firstwebsite.com完成授权重定向回secondwebsite.com后，代码会自动读取URL中的code参数。

场景2：在Node.js等服务端/本地脚本环境中获取，不需要页面跳转 #

可以通过配置HTTP客户端跟随重定向，拿到最终请求地址后解析参数，以axios为例：

const axios = require('axios')
const { URL } = require('url')

async function fetchAuthCode() {
  try {
    const initialUrl = 'https://www.firstwebsite.com?redirect_uri=https://www.secondwebsite.com&response_type=code'
    const response = await axios.get(initialUrl, {
      maxRedirects: 5, // 配置允许最多跟随5次重定向
      // 若授权需要登录态，可在此处添加cookie、请求头等配置
    })
    // 提取最终重定向的地址
    const finalUrl = response.request.res.responseUrl
    const code = new URL(finalUrl).searchParams.get('code')
    console.log('获取到的code：', code)
    return code
  } catch (err) {
    console.error('请求失败：', err)
  }
}

fetchAuthCode()

注意：如果授权流程需要用户手动登录、同意授权，需要额外模拟相关请求的参数，否则无法拿到带code的最终地址。

场景3：浏览器端使用，无法修改回调地址页面代码 #

受浏览器同源策略限制，无法通过AJAX请求跨域获取重定向地址参数，可通过弹出授权窗口、监听窗口URL变化的方式实现，示例代码：

function getCodeFromAuthPopup() {
  const authUrl = 'https://www.firstwebsite.com?redirect_uri=https://www.secondwebsite.com&response_type=code'
  // 弹出授权窗口
  const authWindow = window.open(authUrl, 'authWindow', 'width=600,height=600')
  // 轮询检查窗口URL
  const timer = setInterval(() => {
    try {
      // 当弹窗跳转到和当前页面同域地址时可读取location
      if (authWindow.location.host === window.location.host) {
        const code = new URLSearchParams(authWindow.location.search).get('code')
        if (code) {
          console.log('获取到的code：', code)
          authWindow.close()
          clearInterval(timer)
          // 后续业务逻辑
        }
      }
    } catch (e) {
      // 跨域时读取location会抛出错误，属于正常情况，继续轮询即可
    }
  }, 500)
}

注意：此方案要求回调地址secondwebsite.com和你当前使用的页面属于同一域名，否则依然受同源策略限制无法读取弹窗URL。

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