Vue跨域以及几种vue axios传参问题
前言:springboot和vue前后端分离项目,分别需要在不同的电脑上进行项目启动,所以在同一个无线网下,如果两个电脑之间不能ping成功那么没有前后端项目通信的基础,所以要保证两个电脑能够ping 成功。
方式:设置电脑入站规则
一、vue跨域问题
1、跨域介绍:
浏览器在发送ajax请求时发现请求的域名和自己项目域名地址不一致,浏览器会直接无法返回请求结果。
2、错误信息:
关键字介绍:Access-Control-Allow-Origin
3、解决方式:
传统ajax跨域解决方式:https://blog.csdn.net/CoderYin/article/details/82698383 个人博客
vue axios跨域解决方式:生成代理地址。
参见博客:https://blog.csdn.net/yuanlaijike/article/details/80522621
二、axios几种传参方式以及传参报错后台获取不到参数问题
1、qs介绍:
简介:qs.js , 更好的处理url参数。
2、qs方法介绍:
qs.parse()将URL解析成对象的形式
qs.stringify()将对象 序列化成URL的形式,以&进行拼接
3、具体案例
参见博客:https://blog.csdn.net/gloria199091/article/details/80083570
三、axios传参问题
1、后台以实体类进行接受参数
// 后台代码
public List<Major> findMajor(@RequestBody @Valid Major major){ }
// 前台代码
let entity = {
"provinceCode":that.provinceCode,
"education":that.educationCode,
"majorId":that.majorCode,
"token":that.tokeninfo
}
that.$axios({
url:'/userController/setUserMsg',
method: 'post',
data:entity
})
2、后台以单个参数接受参数
// 后台代码
public String addArticle(@RequestParam("token") String token,
@RequestParam("title") String title,
@RequestParam("content") String content,
@RequestParam("type") Integer type){
}
// 前台代码
let param = {
"token":that.token,
"title":that.title,
"content":that.content,
"type":0
},
that.$axios({
url:'/userController/getAnswerUserMsgById',
method:'post',
data:qs.stringify(param),
headers:{
'Content-Type':'application/x-www-form-urlencoded',
}
})
// 注意要事先导入 qs文件