-、跨域问题以及使用@CrossOrigin解决
先介绍一下什么是跨域：
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；
站在巨人的肩膀上）
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html调用 http://www.123.com/server.PHP （非跨域）
http://www.123.com/index.html调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html调用 http://def.123.com/server.php（子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html调用http://www.123.com:8081/server.php（端口不同:8080/8081，跨域）
http://www.123.com/index.html调用 https://www.123.com/server.php（协议不同:http/https，跨域）
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
当域名www.abc.com下的js代码去访问www.def.com域名下的资源，就会受到限制。
举个小小的栗子：
springboot创建一个基本的web项目
@RestController
public class HelloController {
private static final String template="hello %s!";
private final AtomicLong counter = new AtomicLong();
@GetMapping("/hello")
public Hello greeting(@RequestParam(required=false, defaultValue="World") String name) {
System.out.println("==== run in hello ====");
return new Hello(counter.incrementAndGet(), String.format(template, name));
}
}欢迎页面用ajax来接受数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/hello"
}).then(function(data, status, jqxhr) {
$('.greeting-id').append(data.id);
$('.greeting-content').append(data.content);
console.log(jqxhr);
});
});
</script>
</head>
<body>
<div>
<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>
</div>
</body>
</html>结果如图：
随后再创建一个另一个项目并且发布到8090端口：
只需写一下欢迎页面让他请求8080端口下的数据
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/hello"
}).then(function(data, status, jqxhr) {
$('.greeting-id').append(data.id);
$('.greeting-content').append(data.content);
console.log(jqxhr);
});
});问题出现了
然后我们查看一下请求以及
根据阮一峰的blog：http://www.ruanyifeng.com/blog/2016/04/cors.html
我们可以知道对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。
下面是一个例子，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。
Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。
服务器则根据这个值来决定是否同意这次请求。
如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下面的栗子），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。
那如何解决这个问题呢？（其实我早就知道怎么解决了 因为是看springboot官方文档看到的 ，不过是不了解跨域问题才来写一下这篇文章加深下印象）
通过添加 @CrossOrigin接口即可；
@RestController
public class HelloController {
private static final String template="hello %s!";
private final AtomicLong counter = new AtomicLong();
@GetMapping("/hello")
@CrossOrigin(origins = "http://localhost:8090")
public Hello greeting(@RequestParam(required=false, defaultValue="World") String name) {
System.out.println("==== run in hello ====");
return new Hello(counter.incrementAndGet(), String.format(template, name));
}
}可以访问了
然后此时再看表头
跟上文对应住，这就解决了跨域问题。
关于跨域的更深了解可以去看http://www.ruanyifeng.com/blog/2016/04/cors.html
本文解决方案来自springboot官方文档：https://spring.io/guides/gs/rest-service-cors/