vue2前端proxy代理跨域

Vue 2中的 Proxy 是一个强大的工具，它允许你在运行时动态地拦截并修改对象的操作。当你遇到前端跨域请求的问题时，可以利用 Vue 的配置文件（如 `config/index.js` 或者 `main.js` 中的 `devServer` 配置），通过设置 `proxyTable` 来解决。

`proxyTable` 是一个映射对象，它的键是你希望在应用内部使用的路径，值是一个对象，包含两个属性：

1. **target**: 要转发请求的实际 URL。例如，如果你有一个 API 接口在 `https://api.example.com`，这里会写成 `'/api'`。
2. **pathRewrite**: 用于重写目标路径的规则。如果需要将所有 `/api` 请求替换为实际的服务器地址，可以写成 `{ '^/api': '/api' }`。

例如配置如下：

// config/index.js 或 main.js
devServer: {
  proxy: {
    '/api': { // 匹配 /api 开头的请求
      target: 'https://api.example.com', // 实际请求的目标URL
      changeOrigin: true, // 允许跨域，某些服务器可能需要这个选项
      pathRewrite: { '^/api': '' }, // 没有实际匹配到时，去掉前面的 "/api"
    }
  },
},

现在，当你在 Vue 应用中发送像 `this.$axios.get('/api/data')` 这样的请求时，实际上会被代理到 `https://api.example.com/data`，从而避免了浏览器默认的同源策略限制。