Vue-resource 和 http-proxy-middleware 没有路由到后端

Question

我是 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");
      });
  }

我的代理 Table:（在 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)

看来代理无法正常工作。非常感谢任何帮助。

Answer 1

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

您确定某些东西应该返回您正在寻找的地方吗？我有完全相同的设置并且有效。

我的猜测是因为 http://localhost:8080/api can't be found either can http://localhost:3000 因为它们是同一回事。

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

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

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

Answer 2

对我有用的是在 vue 项目的根目录中设置一个 vue.config.js 文件（与 pacakge.json 处于同一级别） ) 并在该文件中我使用了以下代码：

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

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

Vue-resource 和 http-proxy-middleware 没有路由到后端

Vue-resource and http-proxy-middleware not routing to backend

proxy

vue.js

vue-resource

http-proxy-middleware