对vue cli中的porxy跨域本地代理请求的透彻理解

本篇文章详细解释了在vue-cli中，proxy代理本地跨域请求的原理。

vue-cli 2 中的写法和vue-cli 3 4的写法的区别

// vue-cli 2
proxyTable: {
      '/apis': {
        target: "https://api.muxiaoguo.cn",
        changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL
        pathRewrite: {
          '^/apis': '/'
        }
      }
    }

// @vue/cli 4
proxy: {
      '/apis': {
        target: 'https://api.muxiaoguo.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/apis': ''
        }
      }
    }

vue cli在本地会给我们开启一个node服务器, 对于已标识跨域的请求, 我们可以让这个node服务器帮我们去请求跨域的接口.
假设现在有一个完整的接口路径如下:

https://api.muxiaoguo.cn/api/dujitang

我们在proxy配置代理接口的关键字 ‘/apis’

'/apis': {  // 关键字
        target: 'https://api.muxiaoguo.cn', // 目标地址
        changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL
        pathRewrite: {
          '^/apis': '' // 路径中字符替换
        }
      }

其中targe指向真实的服务器

target: 'https://api.muxiaoguo.cn'

以上配置代理服务器完成，以下是代码中拼接url路径

对于需要跨域的接口，就要使用上面配置好的代理。
使用方法是在封装 axios 的时候将 axios 的baseURL设置成了 /apis 关键字。

而 axios 的 baseURL 属性是可以根据不同环境打包替换的。以下使用场景最常见。

• 在本地开发时需要代理跨域的情况下 baseURL需要设置成 /apis
• 在其他环境中，不需要代理跨域的情况下，请将baseURL设置成真实的域名路径

import { baseURL, time, retry, retryDelay } from "@/config/config";

/**
 * 封装axios
 * 导出请求方法
 */
export function apiAxios(options) {
  let obj = {
    headers: { 'token': '123' },
    baseURL: baseURL 
    // 这里baseURL会根据开发环境的不同而改变, 在本地开发环境下就会被设置成 '/apis'
  }

  Object.assign(options, obj)
  // console.log(options);

  return new Promise((resolve, reject) => {
    axios(options).then((res) => {
      if (res) {
        console.log(res);
        resolve(res.data)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

在具体请求接口的时候只需要配置后半截url即可

apiAxios({
      method: 'get',
      url: 'api/dujitang', // 后半截url
      loading: false
    }).then(res => {console.log(res)})

到这里为止, 我们在调用 apiAxios() 请求的时候 请求的url 会被自动拼接为

/apis/api/dujitang

具体到浏览器中显示为

这个时候我们在代码中只要请求接口路径里面出现了 /apis, 代理服务器 (http-proxy-middleware) 就会接管这个接口, 现在我们实际上是请求的代理服务器, 而代理服务器会帮我们请求真正的目标接口

当前代码中请求的是如下接口，请求到代理服务器 http-proxy-middleware

/apis/api/dujitang

代理服务器会请求真实的域名接口

https://api.muxiaoguo.cn/api/dujitang

这样就不会有浏览器跨域问题了，因为服务器之间的请求不存在跨域的概念

如果 axios 的 baseURL 不是设置的关键字 /apis，则 http-proxy-middleware 就不会接管这个请求。

pathRewrite

pathRewrite 关键字的意思是把你当前代理接口的关键字重写替换
我实际的请求接口是

https://api.muxiaoguo.cn/api/dujitang

经过代理服务器的代理请求，请求的路径会变成

https://api.muxiaoguo.cn/apis/api/dujitang

这样就多出了一个路径 /apis
假设关键字替换成123

pathRewrite: {
  '^/apis': '123'
}

它请求的真实接口会变成

https://api.muxiaoguo.cn/123/api/dujitang

这样接口会报错找不到
所有我们这里可以替换成空或者干脆不写

pathRewrite: {
  '^/apis': '' // 为空
}

// 不写pathRewrite
proxy: {
      '/apis': {
        target: 'https://api.muxiaoguo.cn',
        changeOrigin: true, // 支持跨域
      }
    }

这里可以根据实际情况而定
以上如有帮助，请帮忙点个👍🏻

---

微信群大佬都在等着你

微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。