vuejs / vue-cli

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

devServer does not work well #5816

Open orzalter opened 4 years ago

orzalter commented 4 years ago

Version

4.4.6

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz       
  Binaries:
    Node: 14.5.0 - D:\Program Files\node-v14.5.0-win-x64\node.EXE
    Yarn: 1.22.4 - D:\Program Files\node-v14.5.0-win-x64\yarn.CMD
    npm: 6.14.5 - D:\Program Files\node-v14.5.0-win-x64\npm.CMD  
  Browsers:
    Chrome: 83.0.4103.61
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @ant-design-vue/babel-helper-vue-transform-on:  1.0.1
    @ant-design/icons-vue:  2.0.0
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.5.3
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.5.3
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.3
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.3
    @vue/cli-plugin-router: ~4.5.0 => 4.5.3
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.3
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.3
    @vue/cli-service: ~4.5.0 => 4.5.3
    @vue/cli-shared-utils:  4.5.3
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/test-utils: ^1.0.3 => 1.0.3
    @vue/web-component-wrapper:  1.2.0
    ant-design-vue: ^1.6.4 => 1.6.4
    babel-helper-vue-jsx-merge-props:  2.0.3
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    jest-serializer-vue:  2.0.2
    vue: ^2.6.11 => 2.6.11
    vue-eslint-parser:  7.1.0
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.6
    vue-loader:  15.9.3 (16.0.0-beta.5)
    vue-ref:  2.0.0
    vue-router: ^3.2.0 => 3.4.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.4.0 => 3.5.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

yarn serve

What is expected?

proxy return [20, 40, 45, 48, 10, 5]

What is actually happening?

axios get the right answer first time,then An error was reported。

cat vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        bypass: function(req, res) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          } else {
            const name = req.path
              .split("/api/")[1]
              .split("/")
              .join("_");
            const mock = require(`./mock/${name}`);
            const result = mock(req.method);
            delete require.cache[require.resolve(`./mock/${name}`)];
            return res.send(result);
          }
        }
      }
    }
  }
};

cat mock/dashboard_chart.js

function chart(method) {
  let res = null;
  switch (method) {
    case "GET":
      res = [20, 40, 45, 48, 10, 5];
      break;
    default:
      res = null;
  }
  return res;
}

module.exports = chart;

axios code

 mounted() {
    this.getChartData();
    this.interval = setInterval(() => {
      this.getChartData();
    }, 3000);
  },
  methods: {
    getChartData() {
      axios
        .get("/api/dashboard/chart", { params: { ID: 12345 } })
        .then(response => { ...

axios get the right answer first time,then An error was reported。

# yarn serve
DONE  Compiled successfully in 8582ms                                                                                                                                                                             下午8:43:56

  App running at:
  - Local:   http://localhost:8080/  
  - Network: http://192.168.1.3:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

Proxy error: Could not proxy request /api/dashboard/chart?ID=12345 from 192.168.1.3:8080 to http://localhost:3000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

events.js:291
      throw er; // Unhandled 'error' event
      ^

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at writeAfterEnd (_http_outgoing.js:646:15)
    at ServerResponse.end (_http_outgoing.js:766:7)
    at ProxyServer.<anonymous> (C:\Users\orzalter\OneDrive\Git\vue-front\node_modules\@vue\cli-service\lib\util\prepareProxy.js:193:9)
    at ClientRequest.proxyError (C:\Users\orzalter\OneDrive\Git\vue-front\node_modules\http-proxy\lib\http-proxy\passes\web-incoming.js:165:18)
    at ClientRequest.emit (events.js:326:22)
    at Socket.socketErrorListener (_http_client.js:469:9)
    at Socket.emit (events.js:314:20)
    at emitErrorNT (internal/streams/destroy.js:100:8)
    at emitErrorCloseNT (internal/streams/destroy.js:68:3)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ServerResponse instance at:
    at writeAfterEndNT (_http_outgoing.js:705:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21) {
  code: 'ERR_STREAM_WRITE_AFTER_END'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
# firefox console
载入页面时与 ws://192.168.1.3:8080/sockjs-node/003/o54ijg13/websocket 的连接中断。 chunk-vendors.js line 7477 > eval:1684:9

Uncaught (in promise) Error: Network Error
    createError createError.js:16
    handleError xhr.js:91
    dispatchXhrRequest xhr.js:88
    xhrAdapter xhr.js:13
    dispatchRequest dispatchRequest.js:52
    promise callback*request Axios.js:61
    method Axios.js:76
    wrap bind.js:9
    getChartData Analysis.vue:27
    interval Analysis.vue:22
orzalter commented 4 years ago

firefox console

已拦截跨源请求:同源策略禁止读取位于 http://192.168.1.3:8080/sockjs-node/info?t=1598188736040 的远程资源。(原因:CORS 请求未能成功)。

OrenciucEvghenii commented 3 years ago

firefox console

已拦截跨源请求:同源策略禁止读取位于 http://192.168.1.3:8080/sockjs-node/info?t=1598188736040 的远程资源。(原因:CORS 请求未能成功)。

thank you for Chinese answer to an english question

yxnne commented 2 years ago

请问 bypass配置生效了吗