Axios 和 跨域 这两个概念

1. Axios 是什么？

Axios 是一个用于发送网络请求的工具，雷同于欣赏器自带的 fetch，但更强盛、更易用。在前端（Vue）中，我们通常用 Axios 来向后端（Spring Boot）请求数据。

• 举个例子：
  假设你在一个仓储体系中，前端必要从后端获取商品库存信息。这时，前端就可以用 Axios 发送一个请求，比如：
  
  1. axios.get('/api/inventory')
  2.   .then(response => {
  3.     console.log(response.data); // 这里是后端返回的商品库存数据
  4.   });

  复制代码
  后端吸取到这个请求后，会处置惩罚并返回数据，前端拿到数据后就可以表现在页面上。
  
• 为什么用 Axios？
  Axios 支持异步操纵（不会阻塞页面），而且可以很方便地处置惩罚请求和响应，比如添加请求头、处置惩罚错误等。
  

---

2. 跨域是什么？

跨域（Cross-Origin）是一个安全机制，用来限制欣赏器从一个域名（或端口、协议）去请求另一个域名（或端口、协议）的资源。

• 举个例子：
  假设你的前端运行在 http://localhost:8080，而后端运行在 http://localhost:8081。由于它们的端口差别，欣赏器会认为这是两个差别的“域”，默认情况下会克制这种请求，这就是跨域题目。
  
• 为什么会有跨域题目？
  这是欣赏器的安全计谋，为了防止恶意网站盗取数据。比如，如果一个恶意网站可以随意访问你的银行网站的数据，那就太危险了。
  

---

3. 怎样办理跨域题目？

在 Spring Boot 和 Vue 的前后端分离项目中，我们可以通过以下几种方式办理跨域题目：
（1）后端办理跨域（保举）

在 Spring Boot 中，可以通过配置答应特定的前端域名访问后端资源。比如：

1. @Configuration
2. public class CorsConfig {
3.     @Bean
4.     public WebMvcConfigurer corsConfigurer() {
5.         return new WebMvcConfigurer() {
6.             @Override
7.             public void addCorsMappings(CorsRegistry registry) {
8.                 registry.addMapping("/api/**") // 允许哪些接口跨域
9.                         .allowedOrigins("http://localhost:8080") // 允许的前端域名
10.                         .allowedMethods("GET", "POST", "PUT", "DELETE"); // 允许的请求方法
11.             }
12.         };
13.     }
14. }

复制代码

这样，后端就会告诉欣赏器：“答应 http://localhost:8080 这个域名的前端访问我的资源。”
（2）前端办理跨域（开发环境）

在 Vue 的开发环境中，可以通过配置署理（proxy）来办理跨域题目。比如在 vue.config.js 中添加：

1. module.exports = {
2.   devServer: {
3.     proxy: {
4.       '/api': {
5.         target: 'http://localhost:8081', // 后端地址
6.         changeOrigin: true, // 允许跨域
7.         pathRewrite: {
8.           '^/api': '' // 去掉请求路径中的 /api
9.         }
10.       }
11.     }
12.   }
13. };

复制代码

这样，前端在开发时发送的请求会被署理到后端，绕过欣赏器的跨域限制。

---

4. 总结

• Axios：前端用来发送请求的工具，方便获取后端数据。
  
• 跨域：欣赏器的安全机制，限制差别域名之间的请求。
  
• 办理跨域：可以通过后端配置答应特定域名访问，或者在前端开发环境中配置署理。
  

希望这样解释能让你更容易理解！如果另有疑问，接待继承提问！