vue axios 前台跨域传cookie到后台中去

最新推荐文章于 2024-07-03 14:16:48 发布

原创最新推荐文章于 2024-07-03 14:16:48 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Spring Boot应用中实现跨域并允许携带Cookie的方法。通过使用FilterRegistrationBean和CorsConfiguration，可以灵活地配置跨域策略。此外，还介绍了前端如何配合此配置进行请求。

1、后台配置

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 1.允许任何域名使用
 * 2.允许任何头
 * 3.允许任何方法（post、get等）
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*"); // 1
        corsConfiguration.addAllowedHeader("*"); // 2
        corsConfiguration.addAllowedMethod("*"); // 3
        corsConfiguration.addExposedHeader("access-token");
        return corsConfiguration;
    }
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

为什么要使用FilterRegistrationBean 这种方式而不是用以下这种，因为CorsRegistry的请求地址（也就是allowedOrigin）不能设置为星号，通常我们都是喜欢将Access-Control-Allow-Origin设置为星号(也就是允许所有地址访问),而上面那种则不能设置，只能一个一个设置，这样就很不舒服，强烈推荐第一种

**
 * @author:LBK
 * @date:2020/7/29 11:40
 * @description:com.kun.blog.config
 */
@Configuration
public class MvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(false)
                .allowedOrigins("http://localhost:1003")
                .allowedHeaders("*")
                // POST DELETE PUT GET OPTIONS DELETE
                .allowedMethods("POST","DELETE","PUT", "GET","OPTIONS", "DELETE")
                .exposedHeaders("access-token");
    }
}

2、前台配置

在axios请求拦截中设置withCredentials = true（注意一定是要在请求拦截器中配置才能有用）

 service.interceptors.request.use(
  config => {
    config.withCredentials = true
    return config
  },
  error => {
    return Promise.reject(error)
  }
)