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

清疚 2022-05-18 03:18 1781阅读 0赞

代理设置：

在本地使用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/][http_m.kugou.com]，然后选择自己想要进入的页面，之后只需在地址栏中加" ?json=true "即可获得我们想要的接口与数据（当然不是所有的第三方接口都是通过这种方式获得的）
 *  比如我们想要获取的是酷狗音乐排行的页面的数据，在地址栏中的地址就是：[http://m.kugou.com/rank/list?json=true][http_m.kugou.com_rank_list_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"
            }
          }
        }

[http_m.kugou.com]: http://m.kugou.com/
[http_m.kugou.com_rank_list_json_true]: http://m.kugou.com/rank/list?json=true