Vue+SpringBoot使用注解@CrossOrigin解决跨域问题

14 篇文章 0 订阅

背景:前台vue使用本地8082端口,后台使用8080端口,这样前台访问后台时候就产生了跨域问题。这里是从后台解决跨域问题。

@RestController
@CrossOrigin //这个注解解决了跨域问题
@RequestMapping("/account")
public class AccountController {

    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

添加@CrossOrigin后重启后台,发现就不会产生跨域问题了。这个是给整个controller添加了跨域支持,也可以给部分RequestMapping添加跨域支持

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin(origins = "http://domain2.com")
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

@CrossOrigin中的2个参数:
origins  : 允许可访问的域列表
maxAge:准备响应前的缓存持续的最大时间(以秒为单位)。
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是解决 Spring Boot 与 Vue 问题的一种方法。 首先,在 Spring Boot 的后端代码里,我们需要在 Controller 上添加 `@CrossOrigin` 注解,来允许访问。示例代码如下: ```java @RestController @CrossOrigin(origins = "*", maxAge = 3600) public class HelloController { @GetMapping("/hello") public String hello() { return "Hello, world!"; } } ``` 其中 `@CrossOrigin(origins = "*", maxAge = 3600)` 表示允许所有来源的访问,并设置了缓存时间为 3600 秒。 然后,在 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 的后端代码里,我们需要添加一个 Filter,来允许前端发送凭证。示例代码如下: ```java @Configuration public class CorsConfig { @Bean public FilterRegistrationBean corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source)); bean.setOrder(Ordered.HIGHEST_PRECEDENCE); return bean; } } ``` 其中 `config.setAllowCredentials(true)` 表示允许发送凭证。 以上就是解决 Spring Boot 与 Vue 问题的一种方法,希望能够帮到您。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值