如何在Vue/NPM构建的JavaScript项目中实现页面加载时HTTP请求重定向

302跳转本质是HTTP层面的响应行为，不同场景下适配Vue/NPM技术栈的可行方案如下：

1. 构建阶段直接替换资源引用（最推荐，无运行时性能损耗） #

如果URL1是项目代码里显式引入的静态资源地址，直接在构建配置里做字符串替换即可，完全不需要运行时跳转：

• Vue CLI/Webpack项目：使用webpack.DefinePlugin或者string-replace-loader，将所有代码中出现的URL1字符串直接替换为URL2，构建后产物里直接引用的就是目标地址，不会产生额外请求
• Vite项目：使用vite-plugin-string-replace插件，在构建或开发阶段全局替换资源地址
  示例Webpack配置片段：

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.CUSTOM_JS_URL': JSON.stringify('URL2')
    })
  ]
}

代码里引入资源时直接调用该变量即可，也可以用loader做全局匹配替换。

2. 运行时拦截请求实现跳转（适配无法在构建阶段替换的场景） #

如果URL1是动态生成的、或者是第三方依赖内部硬编码的资源地址，可以用前端请求拦截方案：

• 拦截script标签的加载：使用MutationObserver监听DOM节点插入，当检测到src为URL1的script标签插入时，直接修改src属性为URL2，浏览器会直接请求URL2，不会发请求到URL1
• 拦截全局请求：如果是通过fetch/axios动态加载的JS资源，可以直接用请求拦截器替换请求地址
  示例MutationObserver代码：

// 放在入口文件main.js最顶部，确保页面加载初期就生效
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.tagName === 'SCRIPT' && node.src === 'URL1') {
        node.src = 'URL2'
      }
    })
  })
})
observer.observe(document.documentElement, { childList: true, subtree: true })

3. 服务端/代理层实现302跳转（适配必须走302逻辑的场景） #

如果需求强制要求必须先请求URL1返回302再跳转到URL2，前端侧无法直接生成302响应，需要在服务层处理：

• 本地开发阶段：修改Vue项目的devServer代理配置，匹配URL1的请求返回302响应指向URL2
• 生产环境：在静态资源服务器（Nginx/CDN）上配置规则，匹配URL1的请求返回302响应头，Location字段设为URL2即可
  示例Nginx配置：

location = /path/to/url1.js {
  return 302 https://your-domain.com/path/to/url2.js;
}

• 构建替换场景：string-replace-loader（Webpack生态）、vite-plugin-string-replace（Vite生态）
• 运行时拦截场景：不需要额外安装包，原生API即可实现，复杂资源拦截逻辑可以调用Vue内置的自定义渲染能力处理
• 本地代理场景：不需要额外包，Vue CLI/Vite内置的devServer代理能力已经支持自定义响应状态码和响应头

注意：前端侧无法直接控制HTTP响应状态码，如果你需要严格实现「请求URL1返回302再到URL2返回200」的完整链路，必须在服务端/代理层配置规则，前端侧只能做到跳过URL1请求直接请求URL2。

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