vue使用axios调用豆瓣API跨域问题

工程师窅恒技术 2022年11月21日

0 收藏 796 点赞 2,293 浏览 873 个字

最近做了一个vue小demo，使用了豆瓣开源的API，通过ajax请求时需要跨域才能使用。

封面.jpg

一、以下是豆瓣常用的开源接口：

正在热映 ：https://api.douban.com/v2/movie/in_theaters 即将上映 ：https://api.douban.com/v2/movie/coming_soon TOP 250 ：https://api.douban.com/v2/movie/top250电影详情 ：https://api.douban.com/v2/movie/subject/:id

由于豆瓣api跨域问题，因此不能直接通过ajax请求访问，我们通过vue-cli提供给我们的代理（proxy）进行配置即可，打开config/index.js，配置代理proxyTable属性如下：

//在proxyTable这个属性中，配置target属性为我们要代理的目标地址。
proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }

这时，我们实际请求ajax。即访问了http://api.douban.com/v2/movie/in_theaters，从而解决跨域的问题。

created:function (){
    axios.get('/api/movie/in_theaters')
      //成功返回
      .then(response=>{
         console.log(response);
      })
      //失败返回
      .catch(error=>{
          console.log(error);
      })
 }

二、注意

最后，要注意了，豆瓣API是有请求次数限制的，不要以为自己coding错了哦。没有申请KEY的一段时间内（听说是1分钟）只能请求10次，申请的KEY只能40次。
并且，当npm run build打包上线发布时，请求会返回404，因为开发环境是vue的proxy代理在生效，把代码放到服务器并且在服务器设置proxy代理即可。