vue如何跨域使用第三方接口

代理设置：

在本地使用http://localhost:8080/ 访问第三方接口，会产生跨域，这时候需要设置代理的方式跨域访问第三方接口

本地使用vue-cli搭建的项目，启动项目后，就是在http环境下的开发环境。直接可以设置代理的方式

设置位置位于项目根目录下的config/index.js中的dev配置项的proxyTable中，设置如下：

    proxyTable: {
      "/proxy/": {//以/proxy/为开头的适合这个规则
        target: "http://m.kugou.com",//目标地址
        "secure": false,//false为http访问，true为https访问
        "changeOrigin": true,//跨域访问设置，true代表跨域
        "pathRewrite": {//路径改写规则
          "^/proxy": ""//以/proxy/为开头的改写为''
          "^/api":"/list"//以/api/为开头的改写为'/list'
        },
        "headers": {//设置请求头伪装成手机端的访问
          "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36"
        }
      }
    }

路径改写规则:

访问地址：http://localhost:8080/proxy/plist/class 访问第三方接口为： http://m.kugou.com/plist/class
访问地址：http://localhost:8080/api/plist/class 访问第三方接口为： http://m.kugou.com/list/plist/class

使用的时候，如下示例（请求酷狗音乐的第三方接口数据）

  import axios from 'axios'
  export default {
  name: 'App',
  created(){
    axios('/proxy/rank/list?json=true').then(({data}) =>{
      console.log(data.rank.list)
    })
  }
}

说明：想要获取酷狗音乐的第三方接口，只需在地址栏中输入：http://m.kugou.com/，然后选择自己想要进入的页面，之后只需在地址栏中加" ?json=true "即可获得我们想要的接口与数据（当然不是所有的第三方接口都是通过这种方式获得的）
比如我们想要获取的是酷狗音乐排行的页面的数据，在地址栏中的地址就是：http://m.kugou.com/rank/list?json=true，其他的页面也一样哦

上面的我们的请求地址没有写http://m.kugou.com/rank/list?json=true,而是写的 /proxy/rank/list?json=true ，这是因为我们在配置中已经配置过了：配置如下：

 proxyTable: {
      "/proxy/": {
        target: "http://m.kugou.com",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
          "^/proxy": ""
        },
        "headers": {
          "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36"
        }
      }
    }

vue如何跨域使用第三方接口

猜你喜欢