如何调整Facebook OAuth2.0重定向URL，使code参数位于锚点后？

这个问题我之前帮不少开发者处理过，本质是URL的标准结构和Facebook OAuth默认行为的冲突——浏览器规定?query必须在#fragment之前，而你的前端路由依赖hash来定位页面，所以才会出现期望和实际不符的情况。下面给你两个可行的解决方案，按需选择：

方案一：后端中间重定向（推荐，更安全） #

这是最稳妥的做法，因为OAuth的code本就应该在后端完成和Facebook的token交换，避免前端暴露敏感信息：

• 把Facebook后台设置的重定向URL改成你的后端接口，比如http://www.test.com/auth/facebook/callback
• 后端接口接收到Facebook传来的code参数后，直接发起重定向，目标URL设为你期望的格式：http://www.test.com/#/a/b?code=xxxx
• 这样用户的浏览器最终会跳转到你想要的URL结构，同时后端可以安全地用code换取用户的access token，再把必要的用户信息返回给前端。

方案二：前端页面处理（适合纯前端项目） #

如果暂时没有后端支持，可以在前端的入口页面（比如根路径http://www.test.com/）添加一段逻辑，自动修正URL结构：

// 页面加载时执行
window.addEventListener('load', () => {
  const searchParams = new URLSearchParams(window.location.search);
  const code = searchParams.get('code');
  
  if (code) {
    // 构造新的hash部分：原hash + 拼接code参数
    let newHash = window.location.hash || '#/a/b';
    newHash += newHash.includes('?') ? `&code=${code}` : `?code=${code}`;
    
    // 用replaceState修改URL，避免页面刷新
    history.replaceState(null, '', `${window.location.pathname}${newHash}`);
    
    // 这里可以继续处理code，比如传给前端路由或发起请求（注意：纯前端处理code有安全风险，建议尽量用后端方案）
  }
});

这个方法会在页面加载时检查URL中的code，如果存在就把它移到hash的参数里，然后更新浏览器地址栏的URL，同时不会触发页面刷新。

需要注意的是：纯前端处理code存在安全隐患，因为code可以用来换取用户的access token，如果被恶意获取可能导致用户信息泄露，所以优先推荐后端方案。

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