Vue跨域以及几种vue axios传参问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CoderYin/article/details/88656702

               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

 

扫描二维码关注公众号，回复： 5672528 查看本文章

二、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文件