目录
axios简介:
axios 是一个基于promise的HTTP库,用于浏览器<script标签引入>和nodejs的,与服务器进行通信的库,简单的讲就是可以发送get,post请求。
webstorm 控制台安装
【1】npm安装方法:(选择以下任意一种)
- npm install axios
- npm install - -save vue-axios
注:如果发送请求之后后端服务器不能接收到请求,则用以下安装方式,安装后重新启动
npm install axios --save -D
【2】在main.js 中引入以下代码
// vue 引入 axios
import axios from 'axios'
Vue.prototype.$axios = axios;
示例:
以下前端用的Vue后端用的Springboot
一、get请求 示例
前端请求:(请求参数Json字符串)
methods: {
search: function () {
this.$axios.get('url/demo' ,{
params:
{
name: this.i_name,
time: this.i_time+'',
}
})
.then(res => {
console.log("请求成功,得到返回结果:" + res)
})
.catch(function () {
console.log("请求失败!")
});
},
},
@GetMapping("/requestPath")
@ResponseBody
public ResultBean summaryPath(@RequestBody JSONObject param, @Validated String req, Pageable page) {
//
return resultBean;
}
注解说明:@RequestBody 和 @ResponseBody
- @RequestBody:用于将请求体中的数据绑定到方法的形参中,该注解应用在方法的形参上。
- @ResponseBody:用于直接返回 return 对象,该注解应用在方法上。
@RestController 注解相当于@ResponseBody和@Controller的结合
二、post请求 示例
前端请求:写法一
this.$axios.post('/my/converter', {
name: that.formLabelAlign.name,
region: that.formLabelAlign.region,
type: that.formLabelAlign.type
}
).then(res => {
console.log(res);
}).catch(function (err) {
console.log(err)
})
前端请求:写法二
this.$axios({
method: 'post',
url: url,
params: {
id: this.data.id,
name: this.data.name,
}
})
.then(res =>{
})
.catch(function(err){
});
后端响应:
@RequestMapping(value = "/addUpdate", method = RequestMethod.POST)
@ResponseBody
public boolean addUser(@RequestBody JSONObject param) {
//
return true;
}
跨域问题
推荐:SpringBoot项目针对跨域问题的三种解决方案 - 橙一万 - 博客园
同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域,在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
开发一些前后端分离的项目,比如使用 SpringBoot + Vue 开发时,后台代码在一台服务器上启动,前台代码在另外一台电脑上启动,此时就会出现跨域问题。
比如:
后台 地址为 http://192.168.70.77:8081
前台 地址为 http://192.168.70.88:8080
此时 ip 与 端口号不一致, 不符合同源策略,造成跨域问题。
解决办法
方法一、web端解决方法:
// 解决跨域
// 使每次请求都带一个 /api 前缀
axios.defaults.baseURL = '/api';
2. config->index.js 配置文件中的 proxyTable: {} 中添加如下代码:
proxyTable: {
"/api": {
target: "http://localhost:8089", // 要请求的后台地址
ws: true, // 启用websockets
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/api": "" // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替
}
}
},
注:若以上请求报404错误的话,把localhost换成本机域名试一下。
我的理解 如下示例:main.js 的配置是把你的请求自动加上一个 /api 前缀成为 /api/my/converter,index.js 中的配置又把 /api 替换成了要请求的后台地址,即 http://localhost:8089/my/converter 。
// 解决跨域后的 发送请求写法
this.$axios.post('/my/converter', {
name: that.formLabelAlign.name,
region: that.formLabelAlign.region,
type: that.formLabelAlign.type
}
).then(res => {
console.log(res);
}).catch(function (err) {
console.log(err)
})
方法二、Java端解决方法:
新建一个配置类如下:
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
}
扩展:
get 和 post 比较
1.请求参数的区别
GET
请求会把请求的参数拼接在URL
后面,以?
分隔,多个参数之间用&
连接;如果是英文或数字,原样发送,如果是空格或中文,则用Base64编码
POST
请求会把提交的数据放在请求体中,不会在URL
中显示出来
2.传输数据的大小
GET
: 浏览器和服务器会限制URL
的长度,所以传输的数据有限,一般是2K
POST
: 由于数据不是通过URL
传递,所以一般可以传输较大量的数据
3.数据解析
GET
: 通过Request.QueryString
获取变量的值
POST
: 通过Request.form
获取变量的值
4.安全性
GET
: 请求参数在URL
后面,可以直接看到,尤其是登录时,如果登录界面被浏览器缓存,其他人就可以通过查看历史记录,拿到账户和密码
POST
: 请求参数在请求体里面传输,无法直接拿到,相对GET
安全性较高;但是通过抓包工具,还是可以看到请求参数的
工作原理
HTTP
协议采用请求/响应模式,客户端向服务器发送一个请求报文,然后服务器响应请求。下面介绍一下一次HTTP
请求的过程:
- 在浏览器中输入
URL
,并按下回车键 - 浏览器向
DNS
服务器请求解析该URL
中的域名对应的IP
地址(如果是IP
请求,则不需要该步骤) - 解析出
IP
后,根据IP
和端口号,和服务器建立TCP连接 - 浏览器向服务器发送请求,该请求报文作为
TCP
三次握手的第三个报文发送给服务器 - 服务器做出响应,把数据发送给浏览器
- 通信完成,断开
TCP
连接 - 浏览器解析收到的数据并显示
状态码
HTTP
协议的状态码由3
位数字组成,第一个数字定义了响应的类别,共有5
中类别:
1. 1xx
: 指示信息--表示请求已接收,继续处理
2. 2xx
: 成功--表示请求已被成功接收、理解、接受
3. 3xx
: 重定向--要完成请求必须进行更进一步的操作
4. 4xx
: 客户端错误--请求有语法错误或请求无法实现
5. 5xx
: 服务器端错误--服务器未能实现合法的请求