如何使用 caddy 和 vuejs 设置反向代理答案

【问题标题】：How to setup reverse proxy with caddy and vuejs如何使用 caddy 和 vuejs 设置反向代理
【发布时间】：2019-06-24 20:57:59
【问题描述】：

我想为我的 SPA 网络应用使用反向代理。我正在使用带有 webpack 的 Vue。在网络应用程序的反向代理后面，由于位于反向代理后面，我收到错误“app.6b786574.js:1 Uncaught SyntaxError: Unexpected token

我已经完全按照 Vue 路由器的 Vue 文档中给出的方式添加了重写配置（复制、粘贴 caddy 部分到 Caddyfile 中）。还添加了警告。

我也尝试在 vue.config.js 中将 publicPath 设置为 '/'，但这不是一个好习惯，但不得不尝试一下。

我也尝试了球童配置的透明选项。至今没有成功。

或者例如添加但我认为这不应该是必需的。

当前的 Caddyfile 如下所示：

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

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

和 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 路由器，我暂时禁用了，但也没有用：

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

预期的只是看到网站。由于在反向代理后面，没有 webpack-ish 错误。

【问题讨论】：

标签： vue.js webpack reverse-proxy caddy

【解决方案1】：

基本上问题出在我的应用程序配置上，而不是它自己的反向代理。

当使用透明时，各种信息被转发。根据Caddy docs，透明是各种上游标头的简写。

但是，我的应用程序必须意识到这一点。通过将其添加到配置中，这是可行的（使用 yml 配置）：

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：

【讨论】：