vue中设置跨域，使用axios请求

在vue的时间开发过程中遇到比较头疼的事情之一，就是在本地与非本地环境中的接口进行联调。最常遇见的就是跨域问题，一把的解决方法有三种：

1. 后台更改header（注：这是后台的事，我们做不了）

2. 使用JQuery提供的jsonp (注：只为了使用jsonp而引入Jquery，有点浪费哈)

3. 使用http-proxy-middleware 代理解决（注：项目使用vue-cli脚手架搭建，常用并且好用）

这里我主要记录的就是第三中方法，步骤如下：

假设需要请求的接口：http://f.apiplus.cn/bj11x5.json

1. 打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
  '/api': {     //使用"/api"来代替"http://f.apiplus.cn" 
    target: 'http://f.apiplus.cn',    //源地址 
    changeOrigin: true,    //改变源 
    pathRewrite: { 
      '^/api': ''     //路径重写，也可以写成 '^/api': 'http://f.apiplus.cn'
      } 
  } 
}

2、页面中使用axios请求数据时直接使用 “/api” 代替：http://f.apiplus.cn

methods: {
    getData () { 
        // /api 代替了服务器地址 'http://f.apiplus.cn'
        axios.get('/api/bj11x5.json', function (res) { 
           console.log(res) 
    })
}

这样，就可以完成跨域请求的需要了。在请求时地址只需要写 '/api/bj11x5.json' 即可，而 '/api' 对应的服务器地址的解析过程webpack会进行转发！

但是，通过这种方法解决跨域，打包部署时会出问题。原因是因为在生产环境中时并没有使用 “/api” 代替：http://f.apiplus.cn

解决方法有两种：

方法一：定义两个变量（手动判断，不依靠webpack进行派发）

解决思路：在开发环境是，该变量 = ‘/api’；在生产环境时，变量 = 'http://f.apiplus.cn' (相等于重写)

let serverUrl = '/api'    //开发环境时 
// let serverUrl = 'http://f.apiplus.cn/'    //生产环境时 
export default { 
   dataUrl: serverUrl + '/bj11x5.json' 
}

方法一：给项目配置API_HOST（自动判断，依靠webpack进行派发）

解决思路：在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，生产环境下用正常的接口地址。

config/dev.env.js：

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

prod.env.js：

module.exports = {
   NODE_ENV: '"production"',        //生产环境
   API_HOST:'"http://10.1.5.11:8080/"'
}

参考博客：https://www.cnblogs.com/wangyongcun/p/7665687.html

https://blog.csdn.net/kirinlau/article/details/78611774

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出

对博客文章的参考，若原文章博主介意，请联系删除！请原谅

vue中设置跨域，使用axios请求

猜你喜欢