0

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

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

方法：

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)

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

4

2 回答 2

2

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

你确定有东西应该返回你正在寻找的地方吗？我实际上有相同的设置，它可以工作。

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

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

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

下面是所有与我的东西一起工作的镜头：

在此处输入图像描述

于 2017-07-05T00:50:47.390 回答
0

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

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

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

于 2019-06-14T17:38:17.597 回答