前端配置wabpack反向代理

项目的开发过程中 经常会遇到跨域的问题

• 跨域: 浏览器往服务器发送请求的时候
  – 域名 端口 地址都相同才可以 不然就是跨域
• 解决方案一般是后端配置cors请求头为* 允许跨域
  – 还有一种方式就上去前端配置反向代理进行跨域
  – 重点: 服务器向服务器发送请求是不会跨域的
  – 所以遇到了跨域 就需要用本地的服务器去发请求

在开发vue项目的时候 webpack都会给我们开启一个本地服务器

• 所以可以通过webpack的配置去配置本地服务器
• 在vue.config.js中进行配置
  – 在axios里把根地址改成/aa (随便自己写)
  – 因为没有填写地址 所以访问的locahost本地服务器加上/aa
  – 这个时候发送请求如果遇到你写的/aa 就会反向代理到target的地址里
  – 这个时候 发请求的就是本地服务器了 是本地服务器通过target代理发的请求

devServer:{
    proxy: {
        '/aa':{  // 如果请求地址里带了/aa  就会代理这台服务器地址
            target: '请求根地址',  // 但是这样地址上会多一个aa  这样地址不对 也访问不到数据
            pathRewrite: {'^/aa':''}  // 把代理地址多出来的aa 替换成空  这样就可以访问到数据了
        }
    }
}