vue-proxy

前端工程化开发时的跨域解决方案

此方案只能用于开发环境，线上最好设置同源策略

1. 场景

前后端分离的项目

前后端不在同一服务器的情况下，前端要访问后端API，可通过在vue.config.js中配置代理服务器

2. 配置

2.1 前提条件

1：安装vue-lic

2：安装axios 用于发送请求

2.2 配置axios

详细配置请查看axios

2.3 开始发送请求

此时控制台会报跨域错误，这个时候就需要设置跨域了，或者后台配置允许跨域（一般都不这么干）

2.4 前端配置跨域

先在根目录创建vue.config.js
写入以下代码

  //vue-cli3.0 里面的 vue.config.js做配置
devServer: {
    proxy: {
        '/api': {     //这里最好有一个 /
            target: 'http://xx.xx.xx.xx:8080',  // 后台接口域名
            ws: true,        //如果要代理 websockets，配置这个参数
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/api':''
            }
        }
    }
  }