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 ...
随机推荐
- 微信小程序开发前期准备
开发文档 官方开发文档 开发IDE 官方工具下载 UI组件 WeUI:是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,新手建议使用: ZanUI-WeAp ...
- 使用C++11实现完美资源管理
1.资源管理包括内存管理.文件句柄等等需要进行打开(申请).关闭(释放)操作的过程 2.VS2010使用的C++规范,严格说来不是C++11,而是C++0x,但是一脉相承的 一:管理数组 相较于aut ...
- python 小词云
# Author:Alex.wang# Date:2017.06.02# Version:3.6.0 import matplotlib.pyplot as pltfrom wordcloud imp ...
- 完美兼容js的jsfuck小测试
无意间发现了一个可以完美兼容js语言的jsfuck语言,所以留一个备份 js转换jsfuck的工具 www.jsfuck.com 效果 代码(预警!!!有点长,不过是不是很有意思) <!DOCT ...
- Charles下载和使用
下文作为备份.来源:https://www.cnblogs.com/rrl92/p/7928770.html 1. Charles下载地址 地址:https://www.charlesproxy.co ...
- Hadoop Archives档案
HDFS 并不擅长存储小文件,因为每个文件最少一个 block,每个 block 的元数据都会在 NameNode 占用内存,如果存在大量的小文件,它们会吃掉NameNode 节点的大量内存. Had ...
- Tomcat启动阻塞变慢
Tomcat 熵池阻塞变慢详解 Tomcat 启动很慢,且日志上无任何错误,在日志中查看到如下信息: Log4j:[2015-10-29 15:47:11] INFO ReadProperty:172 ...
- 新款 2018款macbook Pro 装双系统教程
首个阅读量将破万的文章,感谢支持.防止无良爬虫,开头附上原文链接:http://www.cnblogs.com/xueyudlut/p/7498115.html ------------------- ...
- 【深入理解JAVA虚拟机】第三部分.虚拟机执行子系统.4.类加载及执行子系统的案例与实战
1.概述 在Class文件格式与执行引擎这部分中 : 用户不能控制的:Class文件以何种格式存储,类型何时加载. 如何连接,以及虚拟机如何执行字节码指令等都是由虚拟机直接控制的行为 用户能控制的:字 ...
- 【海龟汤策略】反趋势交易策略源代码分享(基于BOTVS)
策略介绍: 海龟之汤,简称“龟汤”,是个与海龟交易法则相反的交易策略,它利用了跟势交易(特别是海龟方式)在很多假突破方面的缺陷来获利(把海龟做成汤吃掉).上世纪八十年代早期,有个非常著名的交易员团体— ...