vue-cil解决开发环境的跨域问题

为什么会产生跨域问题

由于浏览器同源策略的限制，当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域

解决开发环境的跨域问题

ue-cli为我们在本地开启了一个服务，可以通过这个服务帮我们代理请求,解决跨域问题

步骤：

步骤1.在vue-config.js中配置
步骤2.修改环境配置文件（.env.development）baseURL
步骤3.重启项目，查看接口调用效果（一定要重启项目）

步骤1.

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // http://localhost:8888/api/login ->  http://www.baidu.com/api/login
        // 接口域名发生变化 其余地址保持不变
        '/api': {
            target: 'www.baidu.com', // 我们要代理的真实接口地址
            changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
            // 路径重写
            // 如果我们不光要使得域名修改,而且还需要改变其它路径,则需要做路径重写
            // 比如 我们想把请求的api去掉（真实后台没有api前缀情况） 
            // localhost:8888/api/login -> www.baidu.com/login
            pathRewrite: {
               '^/api': ''
            }
      }
    }
    // end
  }
}

步骤2.

VUE_APP_BASE_API = '/api'