SpringBoot实现跨域
同源策略:判断是否是同源的,主要看这三点,协议,ip,端口。
同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策。
比如在域名https://www.baidu.com下,脚本不能够访问https://www.sina.com源下的资源,否则将会被浏览器拦截。
跨域拦截是前端请求已经发出,并且在后端返回响应时检查相关参数,是否允许接收后端请求。
在微服务开发中,一个系统包含多个微服务,会存在跨域请求的场景。
方式一、最简单方法加注解 ,让注解反射替我们完成跨域功能
@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[] allowedHeaders()
default {};
-
-
String[] exposedHeaders()
default {};
-
-
RequestMethod[] methods()
default {};
-
-
String allowCredentials() default "";
-
-
long maxAge() default -1L;
-
}
直接单独使用浏览器打开这个html文件,掏出我们的测试网页
-
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>测试跨域
</title>
-
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
-
</script>
-
<script>
-
$(
function () {
-
$(
"#test").click(
function () {
-
console.log(
"testing");
-
$.get(
"http://localhost:8080/weaf/test/get",
function(data,status){
-
console.log(data);
-
console.log(status);
-
alert(
"数据: " + data +
"\n状态: " + status);
-
});
-
})
-
})
-
</script>
-
</head>
-
<body>
-
测试按钮,请开启f12
-
<button id="test">测试
</button>
-
</body>
-
</html>
html
没配置跨域情况如下
配置跨域后,成功获取数据
方法二、使用@CrossOrigin需要一个类一类加,假如需要全部添加跨域处理,则需要创建一个配置类
-
-
import org.springframework.context.annotation.Configuration;
-
import org.springframework.web.servlet.config.annotation.CorsRegistry;
-
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
-
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
-
-
/**
-
* Cros协议的配置类。
-
* 继承WebMvcConfigurerAdapter,并且重写方法addCorsMappings。
-
* addCorsMappings方法是用于增加Cros协议配置的方法。默认的实现是空实现。也就是说,在默认的配置环境中,是不进行Cros协议的配置的。
-
*/
-
@Configuration
-
public
class CrosConfiguration implements WebMvcConfigurer {
-
-
/**
-
* 就是注册的过程,注册Cors协议的内容。
-
* 如: Cors协议支持哪些请求URL,支持哪些请求类型,请求时处理的超时时长是什么等。
-
* @param- CorsRegistry - 就是用于注册Cros协议内容的一个注册器。
-
*/
-
@Override
-
public void addCorsMappings(CorsRegistry registry) {
-
registry
-
.addMapping(
"/**")
// 所有的当前站点的请求地址,都支持跨域访问。
-
.allowedMethods(
"GET",
"POST",
"PUT",
"DELETE")
// 当前站点支持的跨域请求类型是什么。
-
.allowCredentials(
true)
// 是否支持跨域用户凭证
-
.allowedOrigins(
"*")
// 所有的外部域都可跨域访问。 如果是localhost则很难配置,因为在跨域请求的时候,外部域的解析可能是localhost、127.0.0.1、主机名
-
.maxAge(
3600);
// 超时时长设置为1小时。 时间单位是秒。
-
}
-
-
}
测试同上
转载:https://blog.csdn.net/weixin_42477252/article/details/106593420
查看评论