Vue dev proxy rule being ignored

Question

I would like to proxy a link from unauthenticated landing page to localhost:8080 in development environment. For some reason, my proxy rule is being ignored.

static site: localhost:80
webapp: localhost:8080

From the static site I have: <v-btn href="https://mysubdomain.mydomain.com">Login</v-btn>

vue.config.js within static project

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

Is this possible? Are href tags ignored by this setting? I've tried with secure: false, also have tried various proxy URLs, for example ^/mysubdomain.mydomain.com. Regardless, I am sent to production subdomain.

tony19 · Accepted Answer · 2021-01-24T01:37:20.533

No, that's not possible.

The dev server proxying only works when the network requests go to the dev server (localhost). For example, it could change http://localhost/api/logo.png to https://example.com/logo.png. It cannot intercept requests with third party destinations.

However, you could use a service worker that rewrites network requests. This has caveats, including having to reload the page for the new server worker to take effect (once to register the worker, and again to use it); and that you'd want to only load the service worker in development.

Using a Service Worker Proxy

Copy the following service worker to your static assets folder (e.g., <projectRoot>/public/ in Vue CLI scaffold projects):

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))
  }
})

Edit your entry script (e.g., <projectRoot>/src/main.js in Vue CLI scaffold projects) to load the 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)
  })
}

Hard reload the browser to register the service worker. The requests are not yet proxied by the service worker until the next normal reload. You don't need to hard reload again unless the service worker is edited.

Vue dev proxy rule being ignored

1 Answers1

Using a Service Worker Proxy