生产环境移动端axios的then中window.location.assign失效问题

场景需求 #

在Next.js/React项目中实现以下流程：

• 用户点击提交按钮时，先打开空白新标签页
• 发送Axios请求获取API生成的目标URL
• 将新标签页重定向至该URL
• 保留新标签页引用，以便在页面关闭后执行后续逻辑

现有实现代码 #

function onSubmit(formData: any) {
 const newPage = window.open('', '_blank', 'toolbar=0,location=0,menubar=0');
 apiCall(newPage);
}

function apiCall(newPage: any) {
 axios({
   method: "post",
   url: "someAPI",
 }).then(function (success) {
   setTimeout(() => {
     newPage.location.assign(success.data.generatedURL);
   });

   const timer = setInterval(() => {
     if (newPage!.closed) {
       clearInterval(timer);
       // 页面关闭后的逻辑
     }
   }, 100);
 }).catch(function (error) {
   // 错误处理逻辑
 });
}

问题现象 #

• 本地环境（桌面+移动端Chrome、Firefox、Safari、Brave）运行完全正常
• 生产环境仅移动端出现异常：空白新标签页能打开，但无法完成重定向
• 已确认请求成功进入then函数，且获取到了正确的重定向URL
• iPhone Chrome浏览器日志报错（已翻译）：

  ERROR TypeError: 加载失败
  ERROR Error: 加载脚本失败: /next/static/error-8353112a0135502.js

解决方案 #

1. 规避移动端浏览器跨窗口安全限制 #

移动端浏览器（尤其是iOS端的Chrome/Safari）对非用户直接触发的窗口操作限制更严格。当前逻辑先打开空白页，再通过异步请求后的location.assign跳转，容易被判定为非用户主动行为而拦截。

优化实现：

• 先打开项目内的临时空白路由（而非纯空白页），避免触发安全拦截
• 请求完成后直接跳转目标URL，无需依赖setTimeout

修改后的代码：

function onSubmit(formData: any) {
  // 打开项目内的空白路由，而非空白页
  const newPage = window.open('/blank', '_blank', 'toolbar=0,location=0,menubar=0');
  if (!newPage) {
    // 处理弹窗被浏览器拦截的情况
    alert('请允许弹窗权限以继续操作');
    return;
  }
  apiCall(newPage);
}

function apiCall(newPage: Window) {
  axios({
    method: "post",
    url: "someAPI",
  }).then(function (success) {
    // 直接跳转目标URL
    newPage.location.assign(success.data.generatedURL);

    const timer = setInterval(() => {
      if (newPage.closed) {
        clearInterval(timer);
        // 页面关闭后的逻辑
      }
    }, 100);
  }).catch(function (error) {
    // 错误时关闭新标签页并提示用户
    newPage.close();
    alert('请求失败，请重试');
  });
}

同时在Next.js中创建/blank路由页面：

// app/blank/page.tsx（App Router）或 pages/blank.tsx（Pages Router）
export default function BlankPage() {
  return (
    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
      加载中...
    </div>
  );
}

2. 排查Next.js静态资源加载异常 #

日志中的脚本加载失败错误，大概率是生产环境静态资源配置问题：

• 检查next.config.js中的assetPrefix配置，确保生产环境资源路径正确匹配部署地址
• 重新构建并部署项目，确认静态资源文件存在且路径无误
• 若使用CDN，清除CDN缓存，确保最新资源可正常访问

3. 备选方案（若允许调整流程） #

如果业务场景允许，可以先完成API请求，再打开新标签页跳转，但这种方式会丢失页面关闭后的监听逻辑。若必须保留监听逻辑，优先采用方案1。

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