zoukankan      html  css  js  c++  java
  • 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代理即可。
  • 相关阅读:
    4.4 Iterator(迭代器)
    4.6 Memento(备忘录)
    4.1 Chain of Responsibility(职责链)
    4.5 Mediator(中介者)
    4.7 Observer(观察者)
    4.8 State(状态)
    4.11 Visitor(访问者)
    4.2 Command(命令)
    3.7 Proxy(代理)
    4.10 Template Method(模板方法)
  • 原文地址:https://www.cnblogs.com/yangsg/p/10633385.html
Copyright © 2011-2022 走看看