axios

最新推荐文章于 2024-09-09 21:14:24 发布

郝樽

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量85

点赞数

分类专栏：前端文章标签：前端 javascript java

本文链接：https://blog.csdn.net/m0_62014694/article/details/128600684

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了Axios作为HTTP库的基本使用，包括基于promise的请求处理和在浏览器、Node.js环境中的应用。同时，详细讨论了由于同源策略导致的跨域问题及其解决方案，例如在SpringBoot中使用@CrossOrigin注解来允许跨域。此外，还展示了如何通过配置Axios的baseURL和拦截器来简化代码并实现自定义请求处理。

摘要由CSDN通过智能技术生成

一、axios基础知识

axios的作用：

Axios 是一个基于 promise（实例化对象）的 HTTP 库，可以用在浏览器和 node.js 中。

官方网站：axios中文网|axios API 中文文档 | axios

使用axios：在pom.xml文件中导入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

@Controller
@CrossOrigin
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserService userService;

    @GetMapping("/list")
    @ResponseBody
    public List<User> list(){
        return userService.list();
    }
}

前端axios发送请求:

<script src="axios.js"></script>
    <script>
      //基于promise
      axios({
        method: 'get',
        url: 'http://localhost:8080/user/list',
      })
        .then((response) => {
          console.log('获取数据成功', response)
        })
        .catch((error) => {
          console.log('获取数据失败', error)
        })

      //另一种写法
      axios
        .get('http://localhost:8080/user/list')
        .then((response) => {
          console.log('获取数据成功1', response)
        })
        .catch((error) => {
          console.log('获取数据失败1', error)
        })
    </script>

二、跨域问题

1、跨域问题的原因：

出于浏览器的同源策略限制。

所谓同源（即指在同一个域）就是两个地址具有相同的协议（protocol）、主机（host）和端口号（port）

以下情况都属于跨域：

跨域原因说明	示例
域名不同	www.jd.com 与 www.taobao.com
域名相同，端口不同	www.jd.com:8080 与 www.jd.com:8081
二级域名不同	item.jd.com 与 miaosha.jd.com

http和https也属于跨域。

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：www.jd.com/item 和 www.jd.com/goods

同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

而我们刚才是从localhost:5500端口去访问localhost:8080端口，这属于端口不同，跨域了。

2、解决跨域问题：

我们只需要在对应controller上添加一个注解就可以了

UserController 类上添加跨域标签@CrossOrigin

@CrossOrigin //解决跨域问题

三、自定义配置

1、axios配置、简化代码，远程接口url地址可以修改成相对路径

2、在处理axios之前使用拦截器队请求做一些处理（请求拦截器、响应拦截器）

<script src="axios.js"></script>
    <script>
      //axios自定义配置,简化代码编写
      const request = axios.create({
        baseURL:  'http://localhost:8080', //主机地址
        timeout:  1000, //超时时间,毫秒
        headers:{
          token:'haozun123'
        }
      })

      //响应拦截器
      request.interceptors.response.use(
        function(respnose){
          console.log('response',respnose);
          return respnose.data
        },function(error){
          console.Promise.reject(error);
        }
      )
      //请求拦截器
      request.interceptors.request.use(
        config =>{
          console.log('请求拦截');
          console.log(config);
          config.headers.mytoken = 'haozun520'
          return config
        },
        error => {
          return Promise.reject(error)
        }
      )

      request({
        url:'/user/list',
        method:'get'
      }).then((respnose) => {
        console.log('数据获取成功',respnose);
      }).catch((error) => {
        console.log('数据获取失败!',error);
      })

      //另一种写法
      request.get('/user/list')
      .then((respnose) => {
        console.log('数据获取成功',respnose.data);
      }).catch((error) => {
        console.log('数据获取失败!',error);
      })
    </script>