vue 请求代理 proxy

// 本地服务器配置
devServer: {
    proxy: {
        // '/api'可以是字符串形式的任何值，表示以/api开头的请求，
        // 实际项目中所以路径以/api开头的请求都会被本地服务器转发
        "/api": {
            // target指想要被代理的后端接口服务器地址(目标路径)(真正需要请求的服务器地址)
            target: 'http://192.168.3.122:1100',
            // 设置为true后，请求头中的host值会被设置成目标URL(target)中的host值
            changeOrigin: true,
            // pathRewrite用以在发送请求时，重写请求路径
            // 如果在实际的请求路径中你不希望出现/api，可以重写路径，在请求路径中去掉/api
            // 假设接口服务地址为：http://192.168.3.122:1100，接口路径为/company/list
            // 假设你的 baseURl 为/api，那么请求路径就会变成：http://192.168.3.122:1100/api/company/list，路径中多余/api
            // 那么你可以通过重写（如下方式）去掉/api，具体的使用根据业务来决定
            pathRewrite: {
               '^/api': ''
            }
         }
    }
}

请求代理的原理

一句话总结：服务器不受同源策略的影响

因为服务器不受同源策略的影响，所以可以使用本地 devServe 服务器将请求代理到目标服务器上。

所以前端需要先向本地服务器发送请求，通过 proxy 的代理配置，本地服务器就可以将我们的请求代理到目标服务器上。

所以使用proxy请求代理时baseURL需设置为非绝对服务地址（如/dev等），用以向本地服务发请求，否则本地服务无法代理成功

解释1：如果前端请求没有服务器地址（域名或ip），浏览器会在前面默认加上当前页面所属服务器地址（开发环境为devServer服务器地址），服务器先在自己身上寻找对应资源，找不到时服务器就会判断当前请求地址和我们配置的代理信息是否符合，符合的话就去帮我们发送请求。

假设有一本地启动前端项目，和后端接口服务器

前端地址为：http://localhost:8083（本地 devServer 服务器地址）（以下简称本地地址）

后端接口服务地址为：http://192.168.3.122:1100（真正请求的服务地址）（以下简称接口地址）

假设 baseURL 为接口地址会跨域，那么可以将 baseURL 设置为本地地址并添加代理路径，向本地服务器发送请求，或者设置 baseURL 为 /api，那么请求同样会指向本地服务器（见解释1），通过配置本地服务器 proxy 代理设置（如上设置），将请求中包含 /api 的请求代理到目标服务器上（有点类似nginx代理）。

因为 proxy 中配置的是对某一具体路径的请求的代理，所以 URL 路径中必须包含配置的路径，否则不会被代理。如 baseURL 如果为本地地址，则需要在 baseURL 中添加一个路径标识，并在 proxy 中配置标识的代理设置，才能正确代理。