proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
语法

const p = new Proxy(target, handler)

target
要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler
一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

vue中vue.config.js配置

开发阶段可以使用vue.config.js配置proxy来解决跨域。
原理：

1. 将域名发送给本地服务器(localhost:8080)
2. 再由本地的服务器去请求真正的服务器
3. 因为请求是从服务端发出的，所以就不存在跨域问题了

修改vue.config.js配置文件需要重启服务

请求地址

axios.get('system/api/index/data.json').then(data => console.log(data))

配置

module.exports = {
    devServer: {
        host: "0.0.0.0",
        port: 8080,
        // 配置跨域
        proxy: {
            "/system/api/": {
            	// 目标路径
                target: "https://www.bilibili.com/",
                // 允许跨域
                changeOrigin: true,
                // 路径重写
                pathRewrite: {
                  "^/eUrbanGIS": "/eUrbanGIS"
                }
            },
            "/data/api/": {
                target: "https://www.bilibili.com/",
                changeOrigin: true
            }
        }
    }
}

最终

目标地址为：https://www.bilibili.com/index/data.json
代码中请求的地址为：system/api/index/data.json
发送请求的地址为：http://localhost:8080system/api/index/data.json
被proxy替换为实际请求地址: https://www.bilibili.com/index/data.json