vue.js使用axios请求第三方接口跨域问题

最近在用axios请求一个第三方新闻api接口时虽然有请求到数据但是控制台一直有关于跨域报错，数据也打印不出来，如图：

代码：

getNewsList(){
  axios.get("http://v.juhe.cn/toutiao/index?type=top&key=46e7985e9edd93de9915136c8fae6"
  ).then((response)=>{
    var res = response.data;
    console.log(res);
  })
}

 

解决方法：

 

其实很简单，只要设置代理就行啦。

文件位置：项目文件->config->index.js

    找到proxyTable：{ }

    将其修改：

proxyTable: {
  '/api': {
    target: 'http://v.juhe.cn/toutiao',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''  
    }
  }
}

 

再将原来的代码修改成：

 

getNewsList(){
  axios.get("/api/index?type=top&key=46e7985e9edd93de9915c8fae6"
  ).then((response)=>{
    var res = response.data;
    console.log(res);
  })
}

 

修改完成后切记要重启一次服务

 

之后再打开控制台，错误就没了，并且打印出了得到的数据

 

当然了，也还有其他方法，如利用别人写好的远程代理完成：

const api_proxy = 'https://bird.ioliu.cn/v1/?url=';
axios.get("http://v.juhe.cn/toutiao/api/index?type=top&key=46e7985e8de9915136c8fae6")

然后其他代码照常写即可！