如何配置NG Live Dev Server实现多应用本地跨端口localStorage互通？

当然可以解决！问题的根源是浏览器的同源策略——不同端口会被判定为不同的源，而localStorage是严格遵循同源规则的，所以直接访问各自端口的话，两个应用的localStorage完全隔离。我们只需要通过配置本地开发服务器的代理规则，让两个应用在本地开发时共享同一个根域名+端口，仅通过路径区分，就能突破这个限制。

核心思路 #

让两个应用在本地都通过同一个入口地址访问：比如http://localhost:3000/appone对应原appone的开发服务，http://localhost:3000/apptwo代理到原apptwo的开发端口。这样两个应用处于同一源（localhost:3000），localStorage自然就能互通了。

具体配置示例 #

下面针对常见的CLI工具给出配置方案：

1. Vite 项目配置 #

假设appone的开发端口是3000，apptwo是3001。修改appone的vite.config.js：

export default {
  server: {
    port: 3000,
    proxy: {
      // 将/apptwo路径的请求代理到apptwo的开发服务
      '/apptwo': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        // 重写路径，去掉前缀/apptwo，避免apptwo接收错误的路径
        rewrite: (path) => path.replace(/^\/apptwo/, '')
      }
    }
  },
  // 同时要配置appone的基础路径，和代理路径一致
  base: '/appone/'
}

然后修改apptwo的vite.config.js，设置它的基础路径：

export default {
  server: {
    port: 3001
  },
  base: '/apptwo/'
}

启动两个应用后，访问http://localhost:3000/appone和http://localhost:3000/apptwo，此时两个应用同源，localStorage可以互相访问。

2. Webpack 项目配置 #

在appone的webpack.config.js中配置devServer代理：

module.exports = {
  devServer: {
    port: 3000,
    proxy: {
      '/apptwo': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        pathRewrite: {'^/apptwo': ''}
      }
    }
  },
  output: {
    publicPath: '/appone/'
  }
}

apptwo的webpack配置同样设置publicPath: '/apptwo/'，启动后通过http://localhost:3000/appone和http://localhost:3000/apptwo访问即可。

3. 本地Nginx反向代理（通用方案） #

如果你的项目用了其他不支持内置代理的工具，可以用本地Nginx做统一路由：

server {
  listen 80;
  server_name localhost;

  # 路由到appone的开发服务
  location /appone {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
  }

  # 路由到apptwo的开发服务，并重写路径
  location /apptwo {
    proxy_pass http://localhost:3001;
    proxy_set_header Host $host;
    rewrite ^/apptwo(.*)$ $1 break;
  }
}

启动Nginx后，直接访问http://localhost/appone和http://localhost/apptwo即可实现同源访问。

注意事项 #

• 基础路径必须匹配：两个应用的打包基础路径（base/publicPath）要和代理路径一致，这样本地开发和生产部署的路径逻辑完全统一，避免部署后出现路由错误。
• 必须通过代理地址访问：不要直接访问localhost:3000或localhost:3001，一定要通过带路径的代理地址访问，否则还是不同源。
• 测试localStorage互通：可以在appone中用localStorage.setItem('sharedKey', 'testValue')，然后在apptwo中用localStorage.getItem('sharedKey')验证是否能获取到值。

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