Vue开发解决Axios网略请求跨域问题

后端的相关项目BOOT2.0处理的差不多了，基本上没什么大问题。最近在学习前端VUE+Vant移动端组件库遇到了跨域网略请求的问题，借此做个笔记；

首先项目是VUE，项目脚手架不可缺少的是vue-cli，一切准备就绪，接下来看我的表演；

(1) 找到项目下的文件夹config,打开config文件夹里面的index.js文件。通过搜索 proxyTable 节点找到它，如果没有可以在dev节点下新建此节点，截图和代码如下；

proxyTable: {
  '/api': {
    target: 'http://v.XXXX.cn',  //主机ip
    changeOrigin: true,//是否跨域
    secure :false,//http是否加s
    pathRewrite: {
      '^/api': '/'              //重写路径，这里面的值可以这样写也可以用其他字符，用其他字符需要修改请求地址IP后面要加这个字符，例；IP/自定义字符/接口地址
    }
  }
},

上面这段代码的意思就是用/api替代http://v.XXXX.cn网络请求的主机IP，这段代码配置好可以这样请求接口数据

原请求方式：axios.get("http://api.XXXX.com/v2/movie/top250")
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

替换后方式：axios.get("/api/v2/movie/top250")
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

上面配置完成，测试没问题就可以进行下一步；

同一个文件夹下的开发环境dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'/api/'
})

同一个文件夹下的生产环境prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_HOST:"http://v.XXXX.cn"
}

本文仅解决VUE开发时跨域问题，如果你和后台关系比较铁的话，可以和后台商量一下修改后台接口代码。如有不正确之处欢迎批评指正互相探讨。