VUE proxy代理后台服务器踩坑记录

devServer.proxy

Type: string | Object

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

没错，以上都是复制的官网内容。一般按照官网去写就可以了。

关于vue代理这块，到目前为地址，我已经踩坑两次了：

一次是修改vue.config.js后没有重启项目，导致配置死活不生效。

一次就是在不久的昨天，我总算是记得要重启项目了，然而，依旧代理失败。查看网络响应返回的居然还是个页面代码。当然，到目前为止，我也并没有搞清是为什么返回了个页面（大胆猜测是因为其他页面逻辑写了重定向吧）。当然，现在这个问题的成因，我并不想也没时间深究，毕竟还是继续往下工作比较重要。

说下，这次的解决方法吧，不晓得为什么手点了下谷歌浏览器的控制台-网络-勾选停用缓存，然后刷新就可以正常使用了。

 当然即便之后去掉勾选停用缓存也没有再受影响，仍然可以正常使用。

写这篇文章主要是给以后遇到同类问题的猿们一些解决思路，万一就成了呢。更主要的是我搜遍百度也没找到解决方法，为了下次不再踩坑，文字记录下。

再发发牢骚，缓存真是个阴晴不定的小妖精，不知道啥时候就要做下妖。希望我能以此为戒，遇到问题思路打开一些，再打开一些。