アドレス重版： https://segmentfault.com/a/1190000011145364
図1に示すように、クロスドメインシナリオ
http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名，不同文件或路径 允许
http://www.domain.com/lab/c.js
http://www.domain.com:8000/a.js
http://www.domain.com/b.js 同一域名，不同端口 不允许
http://www.domain.com/a.js
https://www.domain.com/b.js 同一域名，不同协议 不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js 域名和域名对应相同ip 不允许
http://www.domain.com/a.js
http://x.domain.com/b.js 主域相同，子域不同 不允许
http://domain.com/c.js
http://www.domain1.com/a.js
http://www.domain2.com/b.js 不同域名 不允许図2に示すように、クロスドメインスルーJSONP
1、springbootのプロジェクト構成
package com.sample.common.advice;
import com.sample.modules.web.controller.JsonpController;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
//配置jsonp，这里选择了 JsonpController
@ControllerAdvice(basePackageClasses = {JsonpController.class})
public class JSONPConfiguration extends AbstractJsonpResponseBodyAdvice {
public JSONPConfiguration(){
super("callback","jsonp");
}
}
2、springbootコントローラ
package com.sample.modules.web.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@RestController
public class JsonpController {
@RequestMapping(value = "/jsonp")
public Map<String, Object> jsonp(){
Map<String, Object> result = new HashMap<>();
result.put("username", "admin");
return result;
}
}
3、ページファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script>
$(function(){
$.ajax({
type:"get",
dataType: 'jsonp',
jsonpCallback: "jsonpcallback",
url:"http://www.test001.com:8080/jsonp"
});
})
function jsonpcallback(result){
alert(JSON.stringify(result))
}
</script>
</html>
3、+ IFRAME document.domainをクロスドメイン
本実施形態は、同じプライマリドメイン、クロスドメインシナリオのサブドメイン
<!-- a.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 当前页面的访问地址为 http://www.test001.com:4000/cros/a.html -->
<!-- 嵌套页面的访问地址为 http://api.test001.com:4000/cros/b.html -->
<!-- 两者主域相同，子域不同 -->
<iframe id="iframe" src="http://api.test001.com:4000/cros/b.html"></iframe>
</body>
<script>
//核心代码
document.domain = 'test001.com';
var user = 'admin';
</script>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
//核心代码
alert('user: ' + window.parent.user);
</script>
</html>4、によって のpostMessageクロスドメイン
<!-- a.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 当前页面的访问地址为 http://www.test001.com:4000/cros/a.html -->
<!-- 嵌套页面的访问地址为 http://www.test002.com:4000/cros/b.html -->
<iframe id="iframe" src="http://www.test002.com:4000/cros/b.html"></iframe>
</body>
<script>
var iframe = document.getElementById('iframe');
iframe.onload = function() {
var data = { name: 'admin' };
// 向 test002 传送跨域数据
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.test002.com:4000');
};
</script>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
window.addEventListener('message', function(e) {
alert('data: ' + e.data);
}, false);
</script>
</html>クロスオリジンリソース共有（CORS）から5、
1、springboot構成
package com.sample.common.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 2允许任何头
corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}
2、ページファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
<script>
$(function(){
$.ajax({
type:"get",
dataType: 'json',
url:"http://www.test001.com:8080/jsonp",
success: function(result){
alert(JSON.stringify(result))
}
});
})
</script>
</html>