1. 程式人生 > 程式設計 >Spring前後端跨域請求設定程式碼例項

Spring前後端跨域請求設定程式碼例項

前後端專案分離,跨域請求時,後端的兩種配置方式:

1.配置類:

package com.helq3.config;

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 CorsConfig {
  private CorsConfiguration buildConfig(){

    CorsConfiguration configuration = new CorsConfiguration();
    //設定屬性
    //允許跨域請求的地址,*表示所有
    configuration.addAllowedOrigin("*");
    //配置跨域的請求頭
    configuration.addAllowedHeader("*");
    //配置跨域的請求方法
    configuration.addAllowedMethod("*");
    //表示跨域請求的時候使用的是否是同一個session
    configuration.setAllowCredentials(true);
    return configuration;
  }
  @Bean
  public CorsFilter corsFilter(){
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**",buildConfig());
    return new CorsFilter(source);
  }
}

2.Controller上面配置

@CrossOrigin(origins = "*",allowedHeaders = "*",methods = {},allowCredentials = "true")
public class TestController {
}

3.Ant Design Vue 中,在src/util/request.js中增加

axios.defaults.withCredentials = true

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。