面试题：Vue CLI 中配置代理解决跨域问题常见方式及原理

Question

在使用 Vue CLI 开发项目时，经常会遇到跨域问题。请描述一下使用 Vue CLI 配置代理解决跨域问题的常见方式，并简要说明其原理。

Answer 1

常见方式

在 vue.config.js 文件中进行代理配置。示例如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 目标服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这里以 /api 为前缀的请求会被代理到 http://example.com ，changeOrigin 设置为 true 表示改变源，pathRewrite 用于重写路径，去除请求路径中的 /api 前缀。

原理

1. 开发环境下：Vue CLI 的 devServer 会创建一个本地服务器，当浏览器发送请求时，若请求路径匹配代理规则（如上述的 /api 前缀），请求就不会直接发送到目标服务器，而是先发送到本地开发服务器。
2. 本地开发服务器转发：本地开发服务器根据代理配置，将请求转发到目标服务器（target 配置的地址）。changeOrigin 设置为 true 时，会修改请求头中的 Origin 字段，使目标服务器认为请求来自合法源，解决跨域限制。同时通过 pathRewrite 对请求路径进行调整，以符合目标服务器的接口要求。目标服务器响应后，本地开发服务器再将响应返回给浏览器，实现了跨域请求。