vue项目里如何配置本地代理实现跨域请求

1、在如图项目配置的index.js文件夹下添加以下一段话

微信图片_20180912182204.png

proxyTable: {
      '/rest': {
        target: 'http://192.168.20.223:8080', <!--此处是需要代理的IP地址-->
        pathRewrite: {
          "^/rest": '/rest'   <!--调取后端接口时，代理识别的头部，rest只是一个自定义识别头部名称，可以自行随意取-->
        },
        // secure: false, <!--https需要配置的参数-->
        changeOrigin: true  <!--接口跨域需要配置的参数-->
      }
    },

代码中的rest只是在请求接口时本人自定义的一个名称，当发起请求的时候，服务器会识别到路径里的/rest，将/rest替换成我们所配置的如：‘http://192.168.20.223:8080’代理ip地址，从而实现跨域请求。

2、代码提交后，必须执行npm run dev 重启一下项目

配完代理，就可以轻松的实现本地的跨域请求了，以上配置不支持公共环境跨域请求，如果需要公共环境跨域请求的话，需要在nginx上配置代理

3、下面给一个如何用配好代理请求后端地址的列子

let url = "/rest/robot/case/caseList?page=1&size=25";<!-- 在后端给的请求地址前面加上代理约定好的头“/rest”-->
let param = {}
this.$http.post(url,param)
.then(result => {
      if (result.data.success) {                       
      } else {                        
      }                  
})
.catch(error => {
    console.log(error)
 });