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：前端用来发送请求的工具，方便获取后端数据。
[*]跨域：欣赏器的安全机制，限制差别域名之间的请求。
[*]办理跨域：可以通过后端配置答应特定域名访问，或者在前端开发环境中配置署理。
希望这样解释能让你更容易理解！如果另有疑问，接待继承提问！
页:
[1]