Question

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

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

方法：

x04 x35 x33 x0a x7a x69 x00 x02

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

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

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

 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...

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

Answer 1

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

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

我的猜测是因为找不到http://localhost:8080/api，http://localhost:3000也可以，因为它们是相同的。

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

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

这里有一些与我的东西一起工作的镜头：

emulator page

Answer 2

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

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

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

Vue资源和http-proxy-middleware不路由到后端

2 个答案: