Spring中如何配置前后端跨域请求的示例代码？

本文共计387个文字，预计阅读时间需要2分钟。

前后端项目分离，跨域请求时，后端有两种配置方式：

1. 配置类：javapackage com.helq3.config;

import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

2. WebMvcConfigurer接口：javapackage com.helq3.config;

import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configurationpublic class WebConfig implements WebMvcConfigurer {

@Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true); }}

前后端项目分离，跨域请求时，后端的两种配置方式：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。