HTTP跨域问题

1、什么是跨域问题

浏览器的同源策略 会阻止一个域的javascript脚本和另外一个域的内容进行交互

2、解决方案

2.1 Jsonp解决方案

跨域资源嵌入的jsonp

同源策略允许 跨域资源嵌入，因此我们可以借此实现跨域；

跨域资源嵌入常见的有：<script src="..."></script>、<img src="...">、<iframe src="...">

客户端向服务器发送请求，提交参数（参数值为方法名）

<script>
	function fun(data) {
		console.log(data);
	}
</script>
<script src="http://localhost:8080/test?callback=fun" type="text/javascript"></script>

服务器端接收参数，并将参数值（方法名）与括号、数据拼接起来，返回给客户端
客户端收到：fun(‘this is return data’)，这是一条JS语句，所以会被执行

@ResponseBody
@RequestMapping("test")
public String test(String callback) {
	String data = "this is return data";
	return callback + "('" + data + "')";
}

使用AJAX的jsonp
本质与方法1相同，都是提交方法名作为参数，然后将方法名和括号、数据拼接并返回

<script>
	function fun(data) {
		console.log(data);
	}

	$(function() {
		$.ajax({
			url:"http://localhost:8080/test",
			type:"get",
			dataType:"jsonp",
			jsonpCallback:"fun",
		});
	})
</script>

@ResponseBody
@RequestMapping("test")
public String test(String callback) {
	String data = "this is return data";
	return callback + "('" + data + "')";
}

2.2 CORS解决方案

在响应头中设置允许跨域，客户端就可以直接获取数据
这种方法的好处在于：前端不需要使用JSONP，照常提交就可以

$.get("http://localhost:8080/test",function(data) {
	console.log(data);
})

设置响应头

@ResponseBody
@RequestMapping("test")
public String test(String callback, HttpServletRequest request, HttpServletResponse response) {
	response.addHeader("Access-Control-Allow-Origin", "*");
	response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
	response.addHeader("Access-Control-Allow-Headers", "Content-Type");
	return "this is return data";
}

配置跨域过滤器

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        // 在最新版Spring要允许Cookie跨域，AllowedOrigin不能设置为*
        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(configSource);
    }

}

3、相关博客

https://www.cnblogs.com/yuansc/p/9076604.html