vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

Vue Cli devServer proxy for all paths is not working. Invalid regular expression: /*/ #7332

Open danieelbog opened 1 year ago

danieelbog commented 1 year ago

Version

5.0.8

Environment info

  System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.819.0), Chromium (106.0.1370.47)
  npmPackages:
    @progress/kendo-barcodes-vue-wrapper:  2021.3.1207
    @progress/kendo-base-components-vue-wrapper:  2021.3.1207 (2022.2.621)
    @progress/kendo-charts-vue-wrapper: 2022.2.621 => 2022.2.621
    @progress/kendo-datasource-vue-wrapper:  2022.2.621
    @progress/kendo-dateinputs-vue-wrapper: 2022.2.621 => 2022.2.621
    @progress/kendo-dropdowns-vue-wrapper: 2022.2.621 => 2022.2.621
    @progress/kendo-editor-vue-wrapper: 2022.2.621 => 2022.2.621
    @progress/kendo-inputs-vue-wrapper: 2022.2.621 => 2022.2.621
    @progress/kendo-upload-vue-wrapper: 2022.2.621 => 2022.2.621
    @progress/kendo-vue-animation: 3.3.3 => 3.3.3
    @progress/kendo-vue-buttons:  3.3.3
    @progress/kendo-vue-common:  3.3.3
    @progress/kendo-vue-data-tools: 3.3.3 => 3.3.3
    @progress/kendo-vue-dateinputs: 3.3.3 => 3.3.3
    @progress/kendo-vue-dropdowns: 3.3.3 => 3.3.3
    @progress/kendo-vue-excel-export: 3.3.3 => 3.3.3
    @progress/kendo-vue-grid: 3.3.3 => 3.3.3
    @progress/kendo-vue-indicators: 3.3.3 => 3.3.3
    @progress/kendo-vue-inputs: 3.3.3 => 3.3.3
    @progress/kendo-vue-intl: 3.3.3 => 3.3.3
    @progress/kendo-vue-labels:  3.3.3
    @progress/kendo-vue-popup: 3.3.3 => 3.3.3
    @vue/babel-helper-vue-jsx-merge-props:  1.4.0
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.4.0
    @vue/babel-preset-app:  5.0.8
    @vue/babel-preset-jsx:  1.4.0
    @vue/babel-sugar-composition-api-inject-h:  1.4.0
    @vue/babel-sugar-composition-api-render-instance:  1.4.0
    @vue/babel-sugar-functional-vue:  1.4.0
    @vue/babel-sugar-inject-h:  1.4.0
    @vue/babel-sugar-v-model:  1.4.0
    @vue/babel-sugar-v-on:  1.4.0
    @vue/cli-overlay:  5.0.8
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8
    @vue/cli-plugin-router: ~5.0.0 => 5.0.8
    @vue/cli-plugin-typescript: ~5.0.0 => 5.0.8
    @vue/cli-plugin-vuex:  5.0.8
    @vue/cli-service: ~5.0.0 => 5.0.8
    @vue/cli-shared-utils:  5.0.8
    @vue/component-compiler-utils:  3.3.0
    @vue/web-component-wrapper:  1.3.0
    bootstrap-vue: 2.22.0 => 2.22.0
    portal-vue: 2.1.7 => 2.1.7
    typescript: ~4.5.5 => 4.5.5
    vue: 2.6.14 => 2.6.14
    vue-functional-data-merge:  3.1.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  17.0.1 (15.10.1)
    vue-router: 3.5.4 => 3.5.4
    vue-style-loader:  4.1.3
    vue-template-compiler: 2.6.14 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

`//vue.config.js

module.exports = defineConfig({ publicPath: "./", filenameHashing: false, productionSourceMap: false, outputDir: outputDir, devServer: { server: "https", port: devServerUrl.port, host: devServerUrl.hostname, headers: { "Access-Control-Allow-Origin": "", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" }, proxy: { "": { // <--- here is the problem target: iisServerUrl.origin, changeOrigin: true, secure: false, cookieDomainRewrite: devServerUrl.hostname, hostRewrite: devServerUrl.host, onProxyReq: function (proxyReq, req) { var protocolWithoutColon = devServerUrl.protocol.substr(0, devServerUrl.protocol.length - 1); proxyReq.setHeader("Forwarded", host=${devServerUrl.host};proto=${protocolWithoutColon}); }, router: {

            }
        }
    }
},

});`

What is expected?

If you write "*" or "**" in proxy the path that you wanted to be proxied, which in webpack would mean "all paths" I would get all the paths to be proxied.

What is actually happening?

I am getting an error: Invalid regular expression: /*/


I ve found that Vue Cli does not support such regular expressions, and in general the api for the dev server and proxy are limited to string or objects.

How could I write this code so it would proxy ALL requests? Thanks

LinusBorg commented 1 year ago
  1. proxy all request under a sub-path i.e. /api/
  2. rewrite the path to remove that subpath so your real backend received /* requests
  3. in your app's requests, conditionally append that subpath to all requests in dev, but not in prod (so prod does requests against / whereas dev does make requests against `/api/) using an [environment variable](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables) The latter should usually be done centrally, i.e. axios offers abasePath` like option.