Vue 开发代理规则被忽略 使用 Service Worker 代理

如何解决Vue 开发代理规则被忽略 使用 Service Worker 代理

我想将未经身份验证的登录页面的链接代理到开发环境中的 localhost:8080。出于某种原因，我的代理规则被忽略了。

static site: localhost:80
webapp: localhost:8080

从静态站点我有： <v-btn href="https://mysubdomain.mydomain.com">Login</v-btn>

vue.config.js 在静态项目中

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],devServer: {
    port: 80,proxy: {
      'https://mysubdomain.mydomain.com': {
        target: 'http://localhost:8080',changeOrigin: true,}
    }
  }
}

这可能吗？此设置是否忽略 href 标签？我尝试过 secure: false，也尝试过各种代理 URL，例如 ^/mysubdomain.mydomain.com。无论如何，我被发送到生产子域。

解决方法

不，这不可能。

开发服务器代理仅在网络请求到开发服务器（本地主机）时起作用。例如，它可以将 http://localhost/api/logo.png 更改为 https://example.com/logo.png。它无法拦截第三方目的地的请求。

但是，您可以使用 service worker that rewrites network requests。这有一些警告，包括必须重新加载页面以使新的服务器工作器生效（一次注册工作器，然后再次使用它）；并且您只想加载开发中的 Service Worker。

使用 Service Worker 代理

1. 将以下 Service Worker 复制到您的静态资产文件夹（例如，Vue CLI 脚手架项目中的 <projectRoot>/public/）：

   self.addEventListener('fetch',event => {
     if (event.request.url.match(/https:\/\/mysubdomain.mydomain.com/)) {
       const redirect = event.request.url.replace(/https:\/\/mysubdomain.mydomain.com/,'http://localhost:8080')
       console.warn('rewriting url',redirect)
       event.respondWith(fetch(redirect))
     } else {
       event.respondWith(fetch(event.request))
     }
   })
   

2. 编辑您的入口脚本（例如，Vue CLI 脚手架项目中的 <projectRoot>/src/main.js）以加载 Service Worker：

   if (process.env.NODE_ENV === 'development' && 'serviceWorker' in navigator) {
     navigator.serviceWorker.register('/path/to/service-worker.js').then(registration => {
       console.log('Service worker registered with scope: ',registration.scope)
     },err => {
       console.log('ServiceWorker registration failed: ',err)
     })
   }
   

3. 硬重新加载浏览器以注册 Service Worker。在下一次正常重新加载之前，Service Worker 尚未代理这些请求。除非编辑了 Service Worker，否则您不需要再次硬重新加载。