Question

我想对我的SPA Web应用程序使用反向代理。我正在将Vue与webpack一起使用。在Web应用程序的反向代理后面，由于在反向代理后面，因此出现错误“ app.6b786574.js：1未捕获的SyntaxError：意外的令牌<”。

我已经完全按照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错误。

Answer 1

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

使用透明时，将转发各种信息。根据{{3}}，透明表示各种上游标头。

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

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

Caddy docs：

如何使用Caddy和Vue.js设置反向代理

1 个答案: