为什么我的前端请求都发送到后端项目？

Question

我正在学习前端和后端接口对接。但是我遇到了一个问题。

---

我的后端项目的端口是8081，当我发送这个请求http://localhost:8081/hello，我会收到一个响应bodyhello

而我的前端项目的端口是8080。当我发送请求喜欢http://localhost:8080/hello时，它的响应与http://localhost:8081/hello相同

---

这是我的vue.config.js

let proxyObj = {};

proxyObj['/']={
    ws: false,
    target: 'http://localhost:8081',
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
}

module.exports= {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    }
}

如果我将proxy: proxyObj 更改为proxy: null 然后转到http://localhost:8080/hello，我只会收到一个空白。我的vue.config.js 文件有什么问题吗？

---

任何帮助将不胜感激！

Answer 1

DevServer 代理将代理请求取决于您的代理配置：

// '/'means this rule will match all requests
proxyObj['/']={
  ws: false,
  // target means requests that matched will be sent to http://localhost:8081
  target: 'http://localhost:8081',
  changeOrigin: true,
  pathRewrite: {
      '^/': ''
  }
}

使用此配置，您的所有请求都将发送到后端服务器，您将收到服务器的响应。如果您将配置对象设置为 null，您的请求将被发送到您的前端项目：http://localhost:8080，因此您将无法收到任何响应。

---

有关代理配置的更多详细信息，请参阅here。