title: How to setup reverse proxy with caddy and vuejs
body: <p>I want to use a reverse proxy for my SPA web app. I am using Vue with webpack. Behind reverse proxy of web app I get the error "app.6b786574.js:1 Uncaught SyntaxError: Unexpected token &lt;" due to being behind reverse proxy.</p>
  
  <p>I have added the rewrite config exactly as given per the Vue documents for vue Router (Copy, paste caddy section into Caddyfile). Also added the caveat. </p>
  
  <p>I also tried to set in vue.config.js the publicPath to '/', however that is not a good habit, but had to give it a try. </p>
  
  <p>I have also tried with transparent option of caddy config. No success so far. </p>
  
  <p>Or for example added the <code></code> But I believe that should not be required.</p>
  
  <p>The current Caddyfile looks as follows:</p>
  
  <pre><code>    :443 {
          proxy / localhost:8081 {
              transparent
          }
          rewrite {
              regexp .*
              to {path} /
          }
      }
  </code></pre>
  
  <p>my vue.config.js:</p>
  
  <pre><code>    module.exports = {
        transpileDependencies: ['vue-octicon'],
        configureWebpack: {
          devtool: 'source-map'
        },
        devServer: {
          port: 8081,
          proxy: {
            '^/api': {
              target: 'http://localhost:8080',
              ws: true,
              changeOrigin: true
            },
            '^/oauth': {
              target: 'http://localhost:9090'
            },
            '^/me': {
              target: 'http://localhost:9090',
              changeOrigin: true,
              ws: true
            },
            '^/product/product': {
              target: 'http://localhost:9200',
              changeOrigin: true,
              ws: true
            }
          }
        }
      }
  </code></pre>
  
  <p>and index.html:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
          &lt;base href="/" /&gt;
          &lt;link rel="icon" href="&lt;%= BASE_URL %&gt;favicon.ico"&gt;
          &lt;title&gt;front-end&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;noscript&gt;
            &lt;strong&gt;We're sorry but front-end doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
          &lt;/noscript&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
          &lt;!-- built files will be auto injected --&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>vue router, I have temporary disabled, but did not help either:</p>
  
  <pre><code>    import Vue from 'vue'
      import store from './store'
      import Router from 'vue-router'
      // some component imports
  
      Vue.use(Router)
  
      const ifAuthenticated = (to, from, next) =&gt; {
        if (store.getters.isAuthenticated) {
          next()
          return
        }
        next('/')
      }
  
      export default new Router({
        mode: 'history',
        base: process.env.BASE_URL,
        routes: [
          {
            path: '/',
            name: 'home',
            component: Home
          },
          {
            path: '/negotiation',
            beforeEnter: ifAuthenticated,
            // component: () =&gt; import(/* webpackChunkName: "negotiation" */ './views/Negotiation.vue')
            component: Negotiation
          },
          {
            path: '/marketplace',
            component: MarketPlace,
            children: [
          {
            path: '',
            component: Search
          },
          {
            path: 'add-api',
            component: AddAPI
          }
        ]
      },
      {
        path: '/user',
        name: 'user',
        beforeEnter: ifAuthenticated,
        component: User
        // component: () =&gt; import(/* webpackChunkName: "user" */ './views/User.vue')
      },
      { path: '*', component: Home }
    ]
  })
  
  </code></pre>
  
  <p>Expected is simply to see the website. No webpack-ish errors due being behind reverse proxy.</p>