Vue-resource 和 http-proxy-middleware 未路由到后端答案

【问题标题】：Vue-resource and http-proxy-middleware not routing to backendVue-resource 和 http-proxy-middleware 未路由到后端
【发布时间】：2017-12-08 10:51:21
【问题描述】：

我是 Vue js 的新手，正在为一个简单的任务跟踪器应用程序编写前端。我正在尝试使用 vue-resource 和 http-proxy-middleware 让应用程序连接到我的后端。后端在 3000 端口，Vue js 前端在 8080 端口。

我使用了Vue docs 中描述的代理设置。

方法：

saveTask() {
    this.$http.get('/api', {title: this.taskTitle})
      .then(response => {
        console.log("success");
      }, response => {
        console.log("error");
      });
  }

我的代理表：（在dev下的config.index.js中）

 proxyTable: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

当我启动服务器时，我看到：

[HPM] Proxy created: /api  ->  http://localhost:3000
[HPM] Proxy rewrite rule created: "^/api" ~> ""
> Starting dev server...

根据要求：

GET http://localhost:8080/api 404 (Not Found)

所以看起来代理不起作用。非常感谢任何帮助。

【问题讨论】：

标签： proxy vue.js vue-resource http-proxy-middleware

【解决方案1】：

您的设置看起来不错，并且请求应该看起来像是来自 8080，因为它是一个代理。

您确定某些东西应该返回您正在寻找的地方吗？我确实有相同的设置，并且可以正常工作。

我的猜测是因为 http://localhost:8080/api 和 http://localhost:3000 都找不到，因为它们是同一回事。

如果这不能解决您的问题，您可以深入挖掘并进行调试，看看那里是否有什么看起来很有趣。

proxyTable: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    logLevel: 'debug',
    pathRewrite: {
      '^/api': '',
    },
  },
},

以下是所有使用我的东西的照片：

【讨论】：

感谢您提供的信息，我会调查并确保 3000 上有人正在收听
你说对了！后端的路由没有监听确切的路由。

【解决方案2】：

对我有用的是在 vue 项目的根目录（与 pacakge.json 处于同一级别）和我使用的那个文件中设置一个 vue.config.js 文件这段代码：

module.exports = {
  devServer: {
    proxy: {
      "^/api": {
        target: "http://localhost:3000",
        ws: true,
        changeOrigin: true
      }
    }
  }
}

现在代理已在 vue 应用程序中设置，请求将到达我的快速服务器：D

【讨论】：