Как настроить обратный прокси с caddy и vuejs - PullRequest
Новая
       334

Как настроить обратный прокси с caddy и vuejs

0 голосов
/ 24 июня 2019

Я хочу использовать обратный прокси-сервер для своего веб-приложения SPA.Я использую Vue с Webpack.За обратным прокси-сервером веб-приложения я получаю сообщение об ошибке "app.6b786574.js: 1 Uncaught SyntaxError: Неожиданный токен <" из-за нахождения за обратным прокси-сервером. </p>

Я добавил конфигурацию перезаписи точно так, как указано в Vueдокументы для Vue Router (скопируйте, вставьте раздел caddy в Caddyfile).Также добавлено предостережение.

Я также попытался установить в vue.config.js publicPath в '/', однако это не очень хорошая привычка, но мне пришлось попробовать.

Я также пробовал с прозрачной опцией конфигурации caddy.Пока безуспешно.

Или, например, добавил Но я считаю, что этого не требуется.

Текущий Caddyfile выглядит следующим образом: 

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

и 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, временно отключен, но не помогло: 

    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 из-за нахождения обратного прокси.

1 Ответ

0 голосов
/ 27 июня 2019

В основном проблема была в конфигурации моего приложения, а не в обратном прокси-сервере.

При использовании прозрачный пересылается различная информация.В соответствии с 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

Источник :

...