还有其他的解决方式吗?
时间: 2024-04-02 18:35:54 浏览: 9
是的,还有其他的解决方式。除了在 Spring Boot 的 Controller 上添加 `@CrossOrigin` 注解之外,我们还可以使用 Spring Boot 提供的 WebMvcConfigurer 来配置跨域请求。具体实现如下:
1. 首先,在 Spring Boot 的后端代码里,我们需要创建一个类,实现 WebMvcConfigurer 接口,并重写 addCorsMappings 方法。示例代码如下:
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedHeaders("*")
.allowedMethods("*")
.maxAge(1800);
}
}
```
其中 `addMapping("/**")` 表示允许所有路径的跨域请求,`allowedOrigins("*")` 表示允许所有来源的跨域请求,`allowedHeaders("*")` 表示允许所有请求头的跨域请求,`allowedMethods("*")` 表示允许所有请求方法的跨域请求,`maxAge(1800)` 表示设置缓存时间为 1800 秒。
2. 然后,在 Vue 的前端代码里,我们需要在 Axios 请求中设置 `withCredentials: true`,来开启跨域请求。示例代码如下:
```javascript
axios.get('http://localhost:8080/hello', { withCredentials: true })
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
```
其中 `withCredentials: true` 表示允许发送跨域凭证,例如 Cookie 等。
通过以上配置,我们可以实现 Spring Boot 与 Vue 跨域请求的问题。希望能够帮到您。