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
并且,当npm run build打包上线发布时,请求会返回404,因为开发环境是vue的
vue-cli 3.0 使用axios配置跨域访问豆瓣接口的更多相关文章
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- ASP.NET MVC4应用程序配置跨域访问
开发框架是使用webapi做后台,HTML5做前台,通过ajax调用webapi后台,返回json结果. 用的编译器是visual Studio2013,下面是配置方法 1.web.config文件 ...
- System.Web.Http.Cors配置跨域访问的两种方式
System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
- nginx配置跨域访问
前端要在本地测试ajax接口,无法跨域访问,所以在测试环境的nginx配置了跨域支持,方法如下: 在nginx.conf文件, http块下配置 42 #support cross domain ac ...
- apache 配置跨域访问
在httpd.conf找到 去掉# LoadModule headers_module modules/mod_headers.so 然后在 独立域名配置 加入 Header set Access- ...
- 把旧系统迁移到.Net Core 2.0 日记 (16) --Cors跨域访问
IE浏览器的Intranet局域网设置默认是可以跨域访问的.chrome就不可以. 这里说的跨域是指javascript代码不能跨域, 当然你在后端controller代码里用HttpClient.G ...
- vue.js axios实现跨域http请求接口
跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android. import axios from 'axios'; import qs from 'qs'; axios.post(' ...
- 跨域访问http接口的使用
最近在弄一个sip网页集成版软电话,为了功能的完善,呼叫中心的工作人员为我们提供了一个http接口,我先在网页中直接打开分析了一下他的返回值,然后又放到js中去访问,结果一放到js中一访问就发现浏览器 ...
- Jquery跨域访问java接口
Jquery前台代码: <script> $.getJSON("http://跨域URL/Example/text.do?jsonpCallback=?", funct ...
随机推荐
- Vs2013 & .net framework 4.5.1 预览介绍
微软发布了vs2013 preview 和fw4.5.1 下面简单介绍一下与大家共享 Developer productivity X64 edit and continue 在2013里面 可以在x ...
- 红黑树(R-B Tree)
R-B Tree简介 R-B Tree,全称是Red-Black Tree,又称为“红黑树”,它一种特殊的二叉查找树.红黑树的每个节点上都有存储位表示节点的颜色,可以是红(Red)或黑(Black). ...
- 浅谈App原生开发、混合开发及HTML5开发的优劣
App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...
- Oracle案例04——ORA-39700: database must be opened with UPGRADE option
Oracle11.2.0.3数据库通过rman备份到Oracle11.2.0.4上做还原,报需要升级的错误,具体处理步骤如下: 一.错误信息 SQL> alter database open r ...
- 鲁棒图(Robustness Diagram)
鲁棒图与系统需求分析 鲁棒图(Robustness Diagram)是由Ivar Jacobson于1991年发明的,用以回答“每个用例需要哪些对象”的问题.后来的UML并没有将鲁棒图列入UML标准, ...
- java之Pattern.compile相关正则表达式
java之Pattern.compile相关正则表达式 1.验证邮箱地址是否正确:String check = "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([ ...
- python 生成器&迭代器
列表生成式 要生成[1x1, 2x2, 3x3, ..., 10x10]>>> [x * x for x in range(1, 11)]for循环后面还可以加上if判断>&g ...
- ABAP类的文档生成工具
本文介绍的工具原理和JavaDoc类似,位于software component BBPCRM 1. 在ABAP类里新建一个名为CLASS_DOCU的私有方法. 然后把所有的注释写在这个方法源代码的前 ...
- mongoDB学习之旅(一)
首先自己去https://www.mongodb.org/官网下载哦~ 我的是64位的 安装就简单讲下吧...下载个安装包, 随便安装, 只要你找到的... cmd进去你的安装目录下/bin文件夹.. ...
- IOS UIWebView(浏览器控件)
什么是UIWebViewUIWebView是iOS内置的浏览器控件系统自带的Safari浏览器就是通过UIWebView实现的 UIWebView不但能加载远程的网页资源,还能加载绝大部分的常见文件h ...