2022-06-30 13:09:23

SpringBoot 跨域配置

方式一：使用过滤器

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;@ConfigurationpublicclassWebConfig{// 过滤器跨域配置@Beanpublic CorsFiltercorsFilter(){
        UrlBasedCorsConfigurationSource source=newUrlBasedCorsConfigurationSource();

        CorsConfiguration config=newCorsConfiguration();// 允许跨域的头部信息
        config.addAllowedHeader("*");// 允许跨域的方法
        config.addAllowedMethod("*");// 可访问的外部域
        config.addAllowedOrigin("*");// 需要跨域用户凭证（cookie、HTTP认证及客户端SSL证明等）//config.setAllowCredentials(true);//config.addAllowedOriginPattern("*");// 跨域路径配置
        source.registerCorsConfiguration("/**", config);returnnewCorsFilter(source);}}

方式二：实现 WebMvcConfigurer，重写 addCorsMappings 方法

import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@ConfigurationpublicclassWebConfigimplementsWebMvcConfigurer{// 拦截器跨域配置@OverridepublicvoidaddCorsMappings(CorsRegistry registry){// 跨域路径
        CorsRegistration cors= registry.addMapping("/**");// 可访问的外部域
        cors.allowedOrigins("*");// 支持跨域用户凭证//cors.allowCredentials(true);//cors.allowedOriginPatterns("*");// 设置 header 能携带的信息
        cors.allowedHeaders("*");// 支持跨域的请求方法
        cors.allowedMethods("GET","POST","PUT","DELETE","OPTIONS");// 设置跨域过期时间，单位为秒
        cors.maxAge(3600);}// 简写形式@OverridepublicvoidaddCorsMappings(CorsRegistry registry){
        registry.addMapping("/**").allowedOrigins("*")//.allowCredentials(true)//.allowedOriginPatterns("*").allowedHeaders("*").allowedMethods("GET","POST","PUT","DELETE","OPTIONS").maxAge(3600);}}

方式三：使用 @CrossOrigin 注解

@RestController@RequestMapping("/client")// @CrossOriginpublicclassHelloController{@CrossOrigin@GetMapping("/hello")public Resulthello(){return Result.success();}@RequestMapping(value="/test", method= RequestMethod.GET)public Resulttest(){return Result.fail();}}

// @CrossOrigin 源码@Target({ElementType.TYPE, ElementType.METHOD})@Retention(RetentionPolicy.RUNTIME)@Documentedpublic @interfaceCrossOrigin{/** @deprecated */@Deprecated
    String[] DEFAULT_ORIGINS=newString[]{"*"};/** @deprecated */@Deprecated
    String[] DEFAULT_ALLOWED_HEADERS=newString[]{"*"};/** @deprecated */@Deprecatedboolean DEFAULT_ALLOW_CREDENTIALS=false;/** @deprecated */@Deprecatedlong DEFAULT_MAX_AGE=1800L;@AliasFor("origins")
    String[]value()default{};@AliasFor("value")
    String[]origins()default{};

    String[]originPatterns()default{};

    String[]allowedHeaders()default{};

    String[]exposedHeaders()default{};

    RequestMethod[]methods()default{};

    StringallowCredentials()default"";longmaxAge()default-1L;}

vuecli+axios 测试案例

<template><divclass="main"><divclass="button-group"><buttonclass="button"@click="handleGet('/client/hello')">hello</button>|<buttonclass="button"@click="handleGet('/client/test')">test</button>|</div></div></template><script>import axiosfrom'../../node_modules/axios'let http= axios.create({
  baseURL:'http://localhost:9090',
  timeout:1000*5})// 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)  这个最好是与后端的 allowCredentials 保持一致// http.defaults.withCredentials = trueexportdefault{
  methods:{handleGet(url){http({
        url}).then(res=>{
        console.log(res.data)})}}}</script>