Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第9章 axios发送HTTP请求 9.2 axios传递参数

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第9章 axios发送HTTP请求

9.2 axios传递参数

接口地址：

书中给的接口已经不能用了

这里笔者自己写一个接口

一个全新的springboot项目

改一下端口

随便写一个带参的接口

package com.dingjiaxiong.uniappaxios.controller;

import org.springframework.web.bind.annotation.*;

/**
 * ClassName: HelloController
 * date: 2022/8/24 9:54
 *
 * @author DingJiaxiong
 */

@RestController
@RequestMapping("/hello")
public class HelloController {
    @GetMapping("/test")
    public String test(@RequestParam Integer id){
        String msg = "服务器接收到了请求，您传来的id参数为" + id;
        return msg;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

测试一下

OK。

回到axios

现在的接口地址为：http://localhost:8086/hello/test

参数为id：100

请求方式为GET

可以发现报错了

Access to XMLHttpRequest at 'http://localhost:8086/hello/test?id=100' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
1

OK，跨域问题

在接口上加上这个注解，整个Controller都支持跨域访问

再试一次

请求成功。

这个栗子中this.$axios.get方法中的第一个参数是请求地址，第二个参数是用户要传递的参数。

还有一个axios的通用形式，举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

效果不变。