文档章节

VUE下跨域设置

见就别贱
 见就别贱
发布于 2017/09/11 10:41
字数 217
阅读 22
收藏 0

##vue 跨域设置(以豆瓣为例)

  1. 在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。
  2. 当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。
    ``` env: require('./dev.env'),
		  	env: require('./dev.env'),
	      	port: 8080,  
	      	autoOpenBrowser: false,
	      	assetsSubDirectory: 'static',
	      	assetsPublicPath: '/',
	      	proxyTable: {
	        	'/api': {
	            	target: 'http://api.douban.com/v2',
	            	changeOrigin: true,
	            	pathRewrite: {
	                	'^/api': ''
	            	}
	        	}
	      	},
	    	// CSS Sourcemaps off by default because relative paths are "buggy"
	    	// with this option, according to the CSS-Loader README
	    	// (https://github.com/webpack/css-loader#sourcemaps)
	    	// In our experience, they generally work as expected,
	    	// just be aware of this issue when enabling this option.
	    	cssSourceMap: false  
		}
	将target设置为我们需要访问的域名。  
3. 然后在main.js中设置全局属性:  
		Vue.prototype.HOST = '/api`  
4. 至此,我们就可以在全局使用这个域名了,如下:   
		var url = this.HOST + '/movie/in_theaters'
    	this.$http.get(url).then(res => {
      	this.movieList = res.data.subjects;
    	},res => {
      		console.info('调用失败');
    	});

© 著作权归作者所有

共有 人打赏支持
见就别贱
粉丝 1
博文 9
码字总数 3632
作品 0
温州
详解Vue-cli代理解决跨域问题

使用vue-cli调接口的时候,总是会出现跨域问题,因为vue的localhost与访问域名不一致导致。而这一点,开发者显然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于...

李晓艳
04/19
0
0
vue+webpack+express中间件接口使用

环境:vue 2.9.3; webpack 目的:接口的调用 跨域方式:   1、express中间的使用   2、nginx代理   3、各个浏览器跨域设置 --------------------------------------------分割线-----...

不爱贞子爱爽子
07/16
0
0
Vue2.0笔记——Ajax,JSONP跨域

Ajax实现 vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行...

逝岁月
04/16
0
0
前端框架之Vue.js 库的使用

vue.js简介 Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。 Vue.js可以作为一个js库来使用,也可以用...

玄学酱
06/22
0
0
使用vue-resource库发送请求获取数据

使用vue-resource库发送请求获取数据 大家一定知道,在jquery中,我们使用$.ajax()方法,来发送请求获取数据, 在vue中,我们使用vue-resource或者axios来向接口发送请求,获取数据,官方推荐...

不负好时光
2017/10/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

异步化,高并发大杀器

今天来聊聊如何让项目异步化的一些事。 在进入正文之前,顺便给大家推荐一个Java架构方面的交流学习群:698581634,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分...

Java大蜗牛
13分钟前
0
0
织梦dedecms安全设置

网站本身做好防范: 1、修改默认后台名。 打开网站根目录,找到[dede],这个文件夹就是后台的路径,可以随意修改,比如修改为[adminbuy],此时后台登陆的路径为:http://www.*****.com/admi...

雨季2014
14分钟前
0
0
完美Python入门基础知识点总结,看完你的Python就完全入门了!

Python标识符 在 Python 里,标识符有字母、数字、下划线组成。 在 Python 中,所有标识符可以包括英文、数字以及下划线(_),但不能以数字开头。 Python 中的标识符是区分大小写的。 以下划线...

糖宝lsh
20分钟前
0
0
Java关于前后台传输中文乱码以及Excel下载乱码解决

针对乱码,一般情况是前后台以及中间件编码格式不同导致.故需要保证编码格式相同即可. 1.前台页面格式指定,这里用的是jsp,故需要将pageEncoding指定为"UTF-8" 2.指定服务器编码格式,比如用的t...

勤奋的蚂蚁
22分钟前
0
0
Flutter组件 - Flexible

Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。 Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如,Row在水平方向,Column在垂直方向),但是...

一箭落旄头
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部