11-axios的基本使用——get方式的请求

1、导入axios的cds或者是js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、编写springboot的controller

3、编写axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>axios的基本使用</h1>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  axios.get("http://localhost:8080/demo?id=21&name=xiaodai").then(function (response) {
        console.log(response.data)
  }).catch(function (error) {
        console.log(error)
  })
</script>

4、运行axios
报错

可以看出是因为跨域的问题
因为vue的端口号是63342，而springboot的端口是8080

5、controller层添加接口 @CrossOrigin
成功访问

posted @ 2021-09-24 15:46  不是孩子了  阅读(783)  评论(0)    收藏  举报