跨域问题解决

vue-cli 解决开发过程中的跨域问题是利用到了 webpack 在开发环境中所提供的代理服务器（http-proxy-middleware）。

前端的 ajax 请求并不是直接发给后台服务器，而是发给了代理服务器，再由代理服务器转发给后台服务器；返回数据的时候，同样也是由代理服务器接收到后台服务器的返回，然后代理服务器再将返回结果转发给前端。

说明

之所以能通过代理服务器解决跨域问题是因为代理服务器（http-proxy-middleware）它不是浏览器，它没有同源安全检测。

配置代理服务器的相关配置是写在 vue.config.js 配置文件中的 devServer 配置项下。

module.exports = {
  devServer: {
    ...
    proxy: {
      "/api": { // 1
        target: 'http://localhost:8080',   // 2 
        changeOrigin: true, // 3
        pathRewrite: {
          '^/api': '/' // 4
        }
      }
    }
    ...
  }
};

TIP

其实，这里的配置就是在『告知』代理服务器（http-proxy-middleware）：我（vue）发给你（http-proxy-middleware）的 HTTP 请求，你要转交给谁，并且在转交的过程中是否需要做某些变动。

1. 所有以 /api 开头的请求都要求代理服务器进行转发。

2. 要求代理服务器（vue 的 http-proxy-middleware）将我们发给它的请求转发到 xxx 地址，即，真实的后台服务器的根路径。这里需要注意的一点是，这里必须加上 http:// 前缀。

3. 是否是跨域请求？这基本上肯定是废话，不跨域就没有必要配置这个 proxy 了。

4. 代理服务器转发时是否需要改写 URI，以及如何改写。

『The End』