300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > VUE进阶之前后台交互axios使用 前后端分离中的跨域问题

VUE进阶之前后台交互axios使用 前后端分离中的跨域问题

时间:2018-11-04 22:07:25

相关推荐

VUE进阶之前后台交互axios使用 前后端分离中的跨域问题

1.学会使用elementUI布局

首先使用npm install element-ui -s将elementUI下载到项目中去

npm install -g/-s/-d-g : 将js依赖下载到node_global-s : 将js依赖下载到当前spa项目中,并且在后续前端项目打包的时候,npm buid 会一起打包到项目中去-d : 将js依赖下载到当前spa项目中,但是在后续前端项目打包的时候,npm buid 不会一起打包项目中去

将elementUI加入到main.js中

要加在组件前面否则样式无法生效

import Vue from 'vue'// 新添加1import ElementUI from 'element-ui' // 新添加2,避免后期打包样式不同,要放在import App from './App';之前import 'element-ui/lib/theme-chalk/index.css' import App from './App'import router from './router'// 新添加3Vue.use(ElementUI) Vue.config.productionTip = false

测试在elementUI官网找个样式放到App.vue中测试看能不能显示

2.axios中get/post的区别

get发送数据请求到后台传输的是一个jason数据格式

dosubmit: function() {let param = {username: this.username,password: this.password}console.log(param)let url = "http://localhost:8080/ssm/user/userLogin";//jason数据格式axios.get(url, {params: param}).then(function(resp) {console.log(resp)}).catch(function(resp) {console.log(resp)})},

post请求需要借助第三方依赖来完成

因为post发送请求到后台传输的数据是一个对象所以不能用jason数据格式

所以还要先安装第三方依赖qsnpm install qs -s

还有vue-axios依赖npm install vue-axios -s

dosubmit() {let param = {username: this.username,password: this.password}console.log(param)let url = "http://localhost:8080/user/userLogin";axios.post(url, qs.stringify(param)).then(function(resp) {console.log(resp)}).catch(function(resp) {console.log(resp)})}

3.前后端分离中的跨域问题

跨域出现原因?

因为浏览器的同源政策,就会产生跨域。 比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。 由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。

当浏览器两个项目协议,ip,端口,项目有一个不一样时就会出现跨域问题

解决跨域问题办法

在web.xml文件中配置拦截器将下面这段代码加入进去

<!--2.配置中文乱码过滤器,使用Spring自带的过滤器--><filter><filter-name>encodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><async-supported>true</async-supported><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param></filter><filter-mapping><filter-name>encodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。