Spring Boot+vue前后端分离项目如何跨域
时间: 2024-02-01 07:01:59 浏览: 43
在Spring Boot项目中,可以使用`CorsFilter`来解决跨域问题。以下是解决跨域的步骤:
1.在Spring Boot项目的配置类中,添加`CorsFilter`过滤器。
```java
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true); // 允许发送Cookie
config.addAllowedOrigin("*"); // 允许任意域名
config.addAllowedHeader("*"); // 允许任意头信息
config.addAllowedMethod("*"); // 允许任意请求方法
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
```
2.在Vue项目中,可以使用`proxyTable`或`axios`来解决跨域问题。
- `proxyTable`方式
在`config/index.js`文件中,添加`proxyTable`配置。
```javascript
module.exports = {
dev: {
proxyTable: {
'/api': {
target: 'http://localhost:8080', // Spring Boot项目的地址
changeOrigin: true,
pathRewrite: {
'^/api': '/api' // 让/api对应到Spring Boot项目中的/api路径
}
}
}
}
}
```
- `axios`方式
在Vue项目的代码中,使用`axios`时设置`withCredentials`为`true`。
```javascript
import axios from 'axios'
axios.defaults.withCredentials = true
```
这样,在发送请求时,`axios`会将`Cookie`带过去,从而避免跨域问题。