SpringBoot通过Cors解决跨域问题(三十一)下

简介: SpringBoot通过Cors解决跨域问题(三十一)下

二. Cors 解决跨域文案

针对的都是服务提供者端, SpringBoot_Cors_Provider 项目里面进行操作.

@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
  @Deprecated
  String[] DEFAULT_ORIGINS = {"*"};
  @Deprecated
  String[] DEFAULT_ALLOWED_HEADERS = {"*"};
  @Deprecated
  boolean DEFAULT_ALLOW_CREDENTIALS = false;
  @Deprecated
  long DEFAULT_MAX_AGE = 1800;
  @AliasFor("origins")
  String[] value() default {};
  @AliasFor("value")
  String[] origins() default {};
  String[] allowedHeaders() default {};
  String[] exposedHeaders() default {};
  RequestMethod[] methods() default {};
  String allowCredentials() default "";
  long maxAge() default -1;
}


可以在类上,也可以在方法上.


通常使用 origins 属性 和 maxAge 属性, 为-1 表示永不过期.


二.一 单方法 单类处理

二.一.一 单方法

添加 @CrossOrigin 注解, 用 origins 属性来指定

//端口号后面不能跟  /
    @CrossOrigin(origins = "http://localhost:8082")
    @GetMapping("/findById")
    @ResponseBody
    public User findById(Integer id){
        User user=new User();
        user.setId(id);
        user.setName("两个蝴蝶飞");
        user.setDescription("Get 提交 跨域问题");
        return user;
    }


只能是 http 协议, localhost 主机, 8082 端口的请求可以访问


重启服务,再次请求,就可以获取到了

image.png


@PostMapping("/addUser")
    @ResponseBody
    @CrossOrigin(origins = "*")
    public User addUser(@RequestBody  User user){
        //补充信息
        user.setName("岳泽霖");
        user.setDescription("POST提交 跨域问题");
        return user;
    }


origins="*" ,表示所有的协议,所有的主机 ,所有的端口 均可以访问.


重启服务器,再次进行请求

image.png



是可以的。


这是针对每一个方法的。 如果一个类里面,方法过多,显然这种方式是不合理的.


二.一.二 单类

在类上添加该注解

@Controller
@CrossOrigin(origins = "*")
public class InfoController {
}


则这个类下面的所有的方法,都可以 进行跨域访问。


当类过多时,这种方式也不太友好。


二.二 CorsConfig 配置全局性跨域

在 config 目录下,创建 CorsConfig 配置类

@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        //设置你要允许的网站域名,如果全允许则设为 *
        config.addAllowedOrigin("*");
        //config.addAllowedOrigin("http://localhost:8082");
        //设置要限制的Header和Method
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        //bean注册顺序
        bean.setOrder(0);
        return bean;
    }
}


同样是可以的.


image.png


二.三 添加 Cors映射

在 WebConfig 目录下, 添加相应的 cors 映射 配置

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    /**
     * 配置静态的资源信息
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
        //映射 static 目录
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        //放置其他 业务页面资源
        registry.addResourceHandler("/**").addResourceLocations("classpath:/templates/");
    }
    /**
     进行添加配置
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}


同样是可以的

image.png

但是,通过这种方式配置的话, 自定义的拦截器会不生效。


一般采用的,都是第二种方式 CorsConfig


相关文章
|
2月前
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
77 3
|
6天前
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
|
6天前
|
JavaScript 前端开发 API
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。
|
1月前
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
313 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
20天前
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
1月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
121 7
|
1月前
|
Java 数据库连接 API
springBoot:后端解决跨域&Mybatis-Plus&SwaggerUI&代码生成器 (四)
本文介绍了后端解决跨域问题的方法及Mybatis-Plus的配置与使用。首先通过创建`CorsConfig`类并设置相关参数来实现跨域请求处理。接着,详细描述了如何引入Mybatis-Plus插件,包括配置`MybatisPlusConfig`类、定义Mapper接口以及Service层。此外,还展示了如何配置分页查询功能,并引入SwaggerUI进行API文档生成。最后,提供了代码生成器的配置示例,帮助快速生成项目所需的基础代码。
|
2月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
3月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
|
3月前
|
API
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)