The devServer proxy won't work with axios while using full path baseUrl

[Ding-Fan]

Version

3.4.0

Reproduction link

https://www.can-not-provide-a-minimal-reproduction-link.com

Environment info

  System:
    OS: Linux 4.14 Manjaro Linux undefined
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
    Yarn: 1.13.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.12.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 64.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.4.0 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.4.0 
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.0 
    @vue/cli-plugin-e2e-cypress: ^3.4.0 => 3.4.0 
    @vue/cli-plugin-eslint: ^3.4.0 => 3.4.0 
    @vue/cli-plugin-pwa: ^3.4.0 => 3.4.0 
    @vue/cli-plugin-unit-jest: ^3.4.0 => 3.4.0 
    @vue/cli-service: ^3.4.0 => 3.4.0 
    @vue/cli-shared-utils:  3.4.0 
    @vue/component-compiler-utils:  2.5.2 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    eslint-plugin-vue: ^5.0.0 => 5.1.0 
    jest-serializer-vue:  2.0.2 
    vue: ^2.5.22 => 2.6.2 
    vue-cli-plugin-axios: ^0.0.4 => 0.0.4 
    vue-cli-plugin-element: ^1.0.1 => 1.0.1 
    vue-eslint-parser:  4.0.3 
    vue-hot-reload-api:  2.3.1 
    vue-jest:  3.0.2 
    vue-loader:  15.6.2 
    vue-router: ^3.0.1 => 3.0.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.2 
    vue-template-es2015-compiler:  1.8.2 
    vuex: ^3.0.1 => 3.1.0 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Set devServer proxy in the vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        logLevel: 'debug',
        target: 'http://192.168.0.111:8098'
      }
    }
  }
}

Set baseUrl in the env.development

VUE_APP_BASE_API="http://192.168.0.111:8098"

Set baseUrl while create axios

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

Put console.log in node_modules/@vue/cli-service/lib/util/prepareProxy.js

        if (context) {
          console.log(
            chalk.red(
              'LOOOOOOOOOOK'
            )
          )
          // Explicit context, e.g. /api
          return pathname.match(context)
        } else {

Call an api in a .vue file

// in a js file
export function haha (data) {
  return request({
    url: '/api/v1/user/queryUser/',
    method: 'post',
    data
  })
}

// in a .vue file
// import that "haha"
methods: {
    handleHaha () {
      haha({ id: 123 })
    }
}

What is expected?

The proxy should work. The 'LOOOOOOOOOOK' should be printed in the terminal.

What is actually happening?

The proxy doesn't work. The 'LOOOOOOOOOOK' doesn't show up.

---

If I don't use a full path baseUrl while creating the axios, everything works. e.g.:

// 创建axios实例
const service = axios.create({
  baseURL: '/', // api 的 base_url
  timeout: 5000 // 请求超时时间
})

[LinusBorg]

This can't work because axios is not sending the request to the devserver, so the proxy can't handle the request.