CODEWITHSUNDEEP
vue.jswebpackreverse-proxycaddy
Crittje
Crittje

Reputation: 101

How to setup reverse proxy with caddy and vuejs

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 <" due to being behind reverse proxy.

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.

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.

I have also tried with transparent option of caddy config. No success so far.

Or for example added the But I believe that should not be required.

The current Caddyfile looks as follows:

    :443 {
        proxy / localhost:8081 {
            transparent
        }
        rewrite {
            regexp .*
            to {path} /
        }
    }

my vue.config.js:

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

and index.html:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <base href="/" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title>front-end</title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but front-end doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>

vue router, I have temporary disabled, but did not help either:

    import Vue from 'vue'
    import store from './store'
    import Router from 'vue-router'
    // some component imports

    Vue.use(Router)

    const ifAuthenticated = (to, from, next) => {
      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: () => 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: () => import(/* webpackChunkName: "user" */ './views/User.vue')
    },
    { path: '*', component: Home }
  ]
})

Expected is simply to see the website. No webpack-ish errors due being behind reverse proxy.

Upvotes: 0

Views: 3242

Answers (1)

Crittje
Crittje

Reputation: 101

Basically the issue was with my application configuration, not the reverse proxy it self.

When using transparent, various information is forwarded. According to the Caddy docs transparent is shorthand for various upstream headers.

However, my application had to be aware of that. This is doable (using yml config) as follows by adding this to the configuration:

server:
  use-forward-headers: true
  tomcat:
    remote-ip-header: X-Forwarded-For
    protocol-header: X-Forwarded-Proto
    internal-proxies: 192\.168\.\d{1,3}\.\d{1,3}
    protocol-header-https-value: https

Source:

Upvotes: 0

Related Questions