vue-cli 3.0 使用axios配置跨域访问豆瓣接口

vue-cli 3.0 配置axios跨域访问豆瓣接口 自己做的小demo

由于豆瓣api跨域问题,因此不能直接通过ajax请求访问,我们通过vue-cli提供给我们的代理 进行配置即可,

在根目录下创建 vue.config.js 

module.exports = {
    //runtimeCompiler: true,
    //publicPath: ‘/‘, // 设置打包文件相对路径
    devServer: {
      // open: process.platform === ‘darwin‘,
      // host: ‘localhost‘,
      port: 8080,
      // open: true, //配置自动启动浏览器 
      proxy: {
        ‘/api‘: {
          target: ‘http://api.douban.com/v2/‘, //对应自己的接口
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            ‘^/api‘: ‘‘
          }
        }
      }
     }, 
  }

调用

created(){
        this.$http.get(‘/api/movie/in_theaters‘).then((res) =>{
          console.log(res);
        })
    }

以下是豆瓣常用的开源接口:

正在热映 :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是有请求次数限制的,不要以为自己coding错了哦。
没有申请KEY的一段时间内(听说是1分钟)只能请求10次,申请的KEY只能40次。
并且,当npm run build打包上线发布时,请求会返回404,因为开发环境是vue的
proxy代理在生效,把代码放到服务器并且在服务器设置proxy代理即可。

vue-cli 3.0 使用axios配置跨域访问豆瓣接口

上一篇:SpringMVC+Spring+Mybatis+Maven整合-使用的工具


下一篇:(1)There's more to life than being happy