跨域问题产生的原因:浏览器为了保护服务器资源的安全而设计的同源保护策略。同源的要求是必须完全相同的协议、域名、端口。当页面里有一个访问其他服务地址下的资源就会被浏览器拦截,从而产生了跨域问题。
jsonp方式
jsonp是利用
$("#jsonp").click(function () {
$.ajax({
type: "GET",
url: "http://localhost:8080/jsonp?key=value", //访问的链接
dataType: "jsonp", //数据格式设置为jsonp
jsonp: "callback", //Jquery生成验证参数的名称
success: function (data) { //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});
});
@GetMapping(value = "jsonp")
public String jsonp(String key, String callback) {
Map<String, String> map = Maps.newHashMap();
map.put("key", key);
return callback + "(" + JSONObject.toJSONString(map) + ")";
}
说明:
1:Ajax的dataType必须设置为jsonp;
2:jsonp的参数“callback”(默认值)需要与接口的入参对齐,两边保持一致;
3:接口返回的数据需要满足格式:callback({"key": "value"})
浏览器发出的请求:http://localhost:8080/jsonp?key=value&callback=jQuery1102021212157166829537_1664270859513&_=1664270859514
Jquery在发送一个Ajax jsonp请求时,会在访问链接的后面自动加上指定的验证参数callback,这个参数值是Jquery随机生成的,目的是唯一标识这次请求。当服务器端接收到该请求时,需要将该参数的值与实际要返回的json值进行构造并且返回,而前端会验证这个参数,如果是它之前发出的参数,那么就会接收并解析数据,如果不是这个参数,那么就拒绝接受。
服务端方式
#直接在接口或者Controller上添加注解@CrossOrigin
@GetMapping(value = "crossOrigin")
@CrossOrigin
public String crossOrigin() {
return "hello";
}
#全局配置
@Configuration
public class CrossOriginConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
//设置允许跨域访问的URL和请求方
registry.addMapping("/crossOrigin")
.allowedOrigins("http://localhost:8081");
}
};
}
}