vue项目中反向代理之proxy

在前后端分离项目里面会遇到跨域问题，什么是跨域？

跨域：有一个大前提，就是只存在于浏览器里面，通过浏览器去访问服务器的话，如果域名，端口，协议其中的任何一样不同，则会出现访问失败，请求不到服务器资源。

怎么解决跨域之proxy:首先proxy英文名就是“代理人”的意思，在vue.config.js里面进行配置；它可以有效地解决浏览器的跨域问题；

vue.config.js文件内：

module.exports = {
  lintOnSave: false, //关闭lint校验
  devServer: {
    Proxy: {
      // "/api" 代理属性的key值，也就是碰到以"/api"开头的请求，就知道要进行代理
      "/api": {
        // target:要代理的服务器地址（按自己需求文档来定）
        target: "http://www.biadu.com",
        //changeOrigin:表示确定代理
        changeOrigin: true,
        //pathRewrite:路径重写，上面使用代理后的路径为：http://www.biadu.com/api
        pathRewrite: {
          //利用正则把api改成空后，路径则为：http://www.biadu.com
          "/^api/": ""
        }
      }
    }
  }
}

反向代理用大白话理解的话就是：男孩找女孩结婚，但是呢，家里边风俗就是需要有一个媒人来说媒才行，这样我才同意把女儿嫁给你，要不然面都见不上，那这个情况怎么办？

  媒人（vue创建项目后台服务器）去找女孩（服务器），跟女孩说有人要娶她，女孩把定情的信件（服务器资源）交给媒人，男孩（浏览器）再去找媒人拿这个信件。这样媒人就相当于女孩的代理人的角色来和男孩沟通，男孩有什么需求通过媒人去转告女孩，女孩有什么物件也可以通过媒人来给男孩。