Axios 和 跨域 这两个概念

1. Axios 是什么？

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

• 举个例子：
  假设你在一个仓储系统中，前端需要从后端获取商品库存信息。这时，前端就可以用 Axios 发送一个请求，比如：

  axios.get('/api/inventory')
    .then(response => {
      console.log(response.data); // 这里是后端返回的商品库存数据
    });
  

  后端接收到这个请求后，会处理并返回数据，前端拿到数据后就可以显示在页面上。

• 为什么用 Axios？
  Axios 支持异步操作（不会阻塞页面），而且可以很方便地处理请求和响应，比如添加请求头、处理错误等。

2. 跨域是什么？

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

• 举个例子：
  假设你的前端运行在 http://localhost:8080，而后端运行在 http://localhost:8081。由于它们的端口不同，浏览器会认为这是两个不同的“域”，默认情况下会阻止这种请求，这就是跨域问题。

• 为什么会有跨域问题？
  这是浏览器的安全策略，为了防止恶意网站窃取数据。比如，如果一个恶意网站可以随意访问你的银行网站的数据，那就太危险了。

3. 如何解决跨域问题？

在 Spring Boot 和 Vue 的前后端分离项目中，我们可以通过以下几种方式解决跨域问题：

（1）后端解决跨域（推荐）

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

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**") // 允许哪些接口跨域
                        .allowedOrigins("http://localhost:8080") // 允许的前端域名
                        .allowedMethods("GET", "POST", "PUT", "DELETE"); // 允许的请求方法
            }
        };
    }
}

这样，后端就会告诉浏览器：“允许 http://localhost:8080 这个域名的前端访问我的资源。”

（2）前端解决跨域（开发环境）

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

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081', // 后端地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 去掉请求路径中的 /api
        }
      }
    }
  }
};

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

4. 总结

• Axios：前端用来发送请求的工具，方便获取后端数据。
• 跨域：浏览器的安全机制，限制不同域名之间的请求。
• 解决跨域：可以通过后端配置允许特定域名访问，或者在前端开发环境中配置代理。

希望这样解释能让你更容易理解！如果还有疑问，欢迎继续提问！ 😊