飞道的博客

SpringBoot怎么实现跨域?这是前后端分离的一大点

248人阅读  评论(0)

SpringBoot实现跨域

同源策略:判断是否是同源的,主要看这三点,协议,ip,端口。

同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策。

比如在域名https://www.baidu.com下,脚本不能够访问https://www.sina.com源下的资源,否则将会被浏览器拦截。

跨域拦截是前端请求已经发出,并且在后端返回响应时检查相关参数,是否允许接收后端请求。

在微服务开发中,一个系统包含多个微服务,会存在跨域请求的场景。

方式一、最简单方法加注解 ,让注解反射替我们完成跨域功能

@CrossOrigin


  
  1. @Target({ElementType.TYPE, ElementType.METHOD})
  2. @Retention(RetentionPolicy.RUNTIME)
  3. @Documented
  4. public @interface CrossOrigin {
  5. /** @deprecated */
  6. @Deprecated
  7. String[] DEFAULT_ORIGINS = new String[]{ "*"};
  8. /** @deprecated */
  9. @Deprecated
  10. String[] DEFAULT_ALLOWED_HEADERS = new String[]{ "*"};
  11. /** @deprecated */
  12. @Deprecated
  13. boolean DEFAULT_ALLOW_CREDENTIALS = false;
  14. /** @deprecated */
  15. @Deprecated
  16. long DEFAULT_MAX_AGE = 1800L;
  17. @AliasFor( "origins")
  18. String[] value() default {};
  19. @AliasFor( "value")
  20. String[] origins() default {};
  21. String[] allowedHeaders() default {};
  22. String[] exposedHeaders() default {};
  23. RequestMethod[] methods() default {};
  24. String allowCredentials() default "";
  25. long maxAge() default -1L;
  26. }

直接单独使用浏览器打开这个html文件,掏出我们的测试网页


  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>测试跨域 </title>
  6. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  7. </script>
  8. <script>
  9. $( function () {
  10. $( "#test").click( function () {
  11. console.log( "testing");
  12. $.get( "http://localhost:8080/weaf/test/get", function(data,status){
  13. console.log(data);
  14. console.log(status);
  15. alert( "数据: " + data + "\n状态: " + status);
  16. });
  17. })
  18. })
  19. </script>
  20. </head>
  21. <body>
  22. 测试按钮,请开启f12
  23. <button id="test">测试 </button>
  24. </body>
  25. </html>

html

没配置跨域情况如下

配置跨域后,成功获取数据

方法二、使用@CrossOrigin需要一个类一类加,假如需要全部添加跨域处理,则需要创建一个配置类


  
  1. import org.springframework.context.annotation.Configuration;
  2. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  3. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  4. import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
  5. /**
  6. * Cros协议的配置类。
  7. * 继承WebMvcConfigurerAdapter,并且重写方法addCorsMappings。
  8. * addCorsMappings方法是用于增加Cros协议配置的方法。默认的实现是空实现。也就是说,在默认的配置环境中,是不进行Cros协议的配置的。
  9. */
  10. @Configuration
  11. public class CrosConfiguration implements WebMvcConfigurer {
  12. /**
  13. * 就是注册的过程,注册Cors协议的内容。
  14. * 如: Cors协议支持哪些请求URL,支持哪些请求类型,请求时处理的超时时长是什么等。
  15. * @param- CorsRegistry - 就是用于注册Cros协议内容的一个注册器。
  16. */
  17. @Override
  18. public void addCorsMappings(CorsRegistry registry) {
  19. registry
  20. .addMapping( "/**") // 所有的当前站点的请求地址,都支持跨域访问。
  21. .allowedMethods( "GET", "POST", "PUT", "DELETE") // 当前站点支持的跨域请求类型是什么。
  22. .allowCredentials( true) // 是否支持跨域用户凭证
  23. .allowedOrigins( "*") // 所有的外部域都可跨域访问。 如果是localhost则很难配置,因为在跨域请求的时候,外部域的解析可能是localhost、127.0.0.1、主机名
  24. .maxAge( 3600); // 超时时长设置为1小时。 时间单位是秒。
  25. }
  26. }

测试同上


转载:https://blog.csdn.net/weixin_42477252/article/details/106593420
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场