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配置跨域访问豆瓣接口的更多相关文章

  1. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  2. ASP.NET MVC4应用程序配置跨域访问

    开发框架是使用webapi做后台,HTML5做前台,通过ajax调用webapi后台,返回json结果. 用的编译器是visual Studio2013,下面是配置方法 1.web.config文件 ...

  3. System.Web.Http.Cors配置跨域访问的两种方式

    System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...

  4. nginx配置跨域访问

    前端要在本地测试ajax接口,无法跨域访问,所以在测试环境的nginx配置了跨域支持,方法如下: 在nginx.conf文件, http块下配置 42 #support cross domain ac ...

  5. apache 配置跨域访问

    在httpd.conf找到  去掉# LoadModule headers_module modules/mod_headers.so 然后在 独立域名配置 加入 Header set Access- ...

  6. 把旧系统迁移到.Net Core 2.0 日记 (16) --Cors跨域访问

    IE浏览器的Intranet局域网设置默认是可以跨域访问的.chrome就不可以. 这里说的跨域是指javascript代码不能跨域, 当然你在后端controller代码里用HttpClient.G ...

  7. vue.js axios实现跨域http请求接口

    跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android. import axios from 'axios'; import qs from 'qs'; axios.post(' ...

  8. 跨域访问http接口的使用

    最近在弄一个sip网页集成版软电话,为了功能的完善,呼叫中心的工作人员为我们提供了一个http接口,我先在网页中直接打开分析了一下他的返回值,然后又放到js中去访问,结果一放到js中一访问就发现浏览器 ...

  9. Jquery跨域访问java接口

    Jquery前台代码: <script> $.getJSON("http://跨域URL/Example/text.do?jsonpCallback=?", funct ...

随机推荐

  1. [转]Tomcat7基于Redis的Session共享

    转自:http://blog.csdn.net/catoop/article/details/48603891 目前,为了使web能适应大规模的访问,需要实现应用的集群部署.集群最有效的方案就是负载均 ...

  2. SQL UNION操作符使用

    SQL UNION 操作符 SQL UNION 操作符合并两个或多个 SELECT 语句的结果. SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意 ...

  3. c#编程指南(六) 类索引器(Class Indexer)

    类索引器,可以使得你使用数组一样的方式来访问类的数据. 这种访问多见于数组,列表,词典,哈希表的快捷访问. 实际上写法很简单,写成:public T1 this[T2 i] 代码如下: using S ...

  4. IONIC屏幕方向锁定

    如果希望阻止app在设备旋转时发生横屏,可以使用这个插件: cordova plugin add cordova-plugin-screen-orientation // set to either ...

  5. xise官方网站|xise最新版下载|-xise

    诠释: 1. 破解VIP登陆限制 2.去后门 (自查) 下载地址 :https://pan.baidu.com/s/1eR2rUOM 查毒地址:http://a.virscan.org/a3983f3 ...

  6. 设置dedecms标签 [field:global.autoindex/] 初始值{class递增}

    在{dede:arclist/}这个标签中有个[field:global.autoindex/],是从0开始自增,如果我们想自定义一个数值,比如自定义从2开始.那么就可以写成下面代码: [field: ...

  7. easyui学习笔记1—增删改操作

    最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...

  8. SAP S/4HANA使用ABAP获得生产订单的状态

    在S/4HANA里,我们如何根据一个销售订单的行项目,查看对应的生产订单状态? 双击行项目: 点击Schedule line: 这里就能看到生产订单的ID和状态了. 其中订单的状态存储在表vsaufk ...

  9. IOS ASI (第三方请求)

    什么是ASI全称是ASIHTTPRequest,外号“HTTP终结者”,功能十分强大基于底层的CFNetwork框架,运行效率很高可惜作者早已停止更新,有一些潜在的BUG无人去解决很多公司的旧项目里面 ...

  10. protobuf编码

     proto2 Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据序列化,适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台无 ...