跨域问题的解决方式

跨域问题产生的原因：浏览器为了保护服务器资源的安全而设计的同源保护策略。同源的要求是必须完全相同的协议、域名、端口。当页面里有一个访问其他服务地址下的资源就会被浏览器拦截，从而产生了跨域问题。

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");
           }
       };
   }
}

本文示例的源代码下载