方式一：使用過濾器

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;

@Configuration
public class WebConfig {

    // 過濾器跨域配置
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration config = new CorsConfiguration();

        // 允許跨域的頭部資訊
        config.addAllowedHeader("*");
        // 允許跨域的方法
        config.addAllowedMethod("*");
        // 可訪問的外部域
        config.addAllowedOrigin("*");
        // 需要跨域使用者憑證（cookie、HTTP認證及客戶端SSL證明等）
        //config.setAllowCredentials(true);
        //config.addAllowedOriginPattern("*");

        // 跨域路徑配置
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(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;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    // 攔截器跨域配置
    @Override
    public void addCorsMappings(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);
    }

    // 簡寫形式
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                //.allowCredentials(true)
                //.allowedOriginPatterns("*")
                .allowedHeaders("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
}
 

方式三：使用 @CrossOrigin 註解

@RestController
@RequestMapping("/client")
// @CrossOrigin
public class HelloController {

    @CrossOrigin
    @GetMapping("/hello")
    public Result hello() {
        return Result.success();
    }

    @RequestMapping(value = "/test", method = RequestMethod.GET)
    public Result test() {
        return Result.fail();
    }

}
 

CrossOrigin原始碼解析

// @CrossOrigin 原始碼
@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
    /** @deprecated */
    @Deprecated
    String[] DEFAULT_ORIGINS = new String[]{"*"};
    /** @deprecated */
    @Deprecated
    String[] DEFAULT_ALLOWED_HEADERS = new String[]{"*"};
    /** @deprecated */
    @Deprecated
    boolean DEFAULT_ALLOW_CREDENTIALS = false;
    /** @deprecated */
    @Deprecated
    long 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 {};

    String allowCredentials() default "";

    long maxAge() default -1L;
}

vuecli+axios 測試案例

<template>
  <div class="main">
    <div class="button-group">
      <button class="button" @click="handleGet('/client/hello')">hello</button>|
      <button class="button" @click="handleGet('/client/test')">test</button>|
    </div>
  </div>
</template>

<script>
import axios from '../../node_modules/axios'

let http = axios.create({
  baseURL: 'http://localhost:9090',
  timeout: 1000 * 5
})

// 跨域請求是否提供憑據資訊(cookie、HTTP認證及客戶端SSL證明等)  這個最好是與後端的 allowCredentials 保持一致
// http.defaults.withCredentials = true

export default {
  methods: {
    handleGet(url) {
      http({
        url
      }).then(res => {
        console.log(res.data)
      })
    }
  }
}
</script>