1.什么是跨域
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。
协议，主机（ip）,端口号，这三个有一个不同就属于跨域访问
跨域访问前端和后端不设置一些东西的话，不能访问
| 当前页面URL | 被请求页面URL | 是否跨域 | 原因 |
|---|---|---|---|
| http://www.test.com/ | http://www.test.com/index.html | 否 | 同源（协议、域名、端口） |
| http://www.test.com/ | https://www.test.com/index.html | 跨域 | 协议不同 |
| http://www.test.com/ | http://www.test1.com/ | 跨域 | 域名不同 |
| http://www.test.com:8080/ | http://www.test.com:8081/ | 跨域 | 端口不同 |
2. 跨域问题的解决方案
比较常用的3种
1.Jsonp 最早的解决方案，利用script标签可以跨域的原理实现。
前端解决方案，不知道好不好用，
2. nginx反向代理
思路是：利用nginx反向代理把跨域改为不跨域，支持各种请求方式
缺点：需要在nginx进行额外配置，语义不清晰
3.CORS【重要】
-
规范化的跨域请求解决方案，安全可靠。
优势：
-
在服务端进行控制是否允许跨域，可自定义规则
- 支持各种请求方式
-
缺点：
会产生额外请求
cors是一种机制，这种机制通过在http头部添加字段，
通常情况下，web应用A告诉浏览器，自己有权限访问应用B
CORS的标准定义是:通过设置http头部字段，让客户端有资格跨域访问资源。通过服务器的验证和授权之后，浏览器有责任支持这些http头部字段并且确保能够正确的施加限制。
JSON与CORS的比较
1.JSONP 只能实现 GET 请求，而 CORS 支持所有类型的 HTTP 请求
2.使用 CORS ，开发者可以是使用普通的 XMLHttpRequest 发起请求和获取数据，比起 JSONP 有更好的错误处理
3.虽然绝大多数现代的浏览器都已经支持 CORS，但是 CORS 的兼容性比不上 JSONP，一些比较老的浏览器只支持 JSONP
3.SpringBoot通过CORS实现跨域
3.1 使用注解实现跨域
@CrossOrigin(origins = "*")
@Slf4j
@RestController
public class EmployeeController {
}
@RestController
@CrossOrigin(origins = "*")//实行全局跨域
@Slf4j
public class HelloController {
@Reference
private HelloService helloService;
@GetMapping(value = "/hello",name = "测试")
public ResponseEntity hello(@RequestParam String name){
String hello = helloService.hello(name);
return ResponseEntity.ok(hello);
}
}
@RestController
public class HiController {
@Reference
private HiService hiService;
@GetMapping(value = "/hi")
public ResponseEntity hiName(@RequestParam String name){
String respHiName = hiService.hiName(name);
return ResponseEntity.ok(respHiName);
}
}
我们可以看到，后端有连个controller HiController中没有添加@CrossOrigin(origins = "*")
跨域访问试试看
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<button id="hello">hello</button>
<button id="hi">hi</button>
<script>
var hello = document.getElementById("hello");
var hi = document.getElementById("hi");
hello.onclick = function(){
axios.get("http://localhost:8082/hello?name=张三")
.then(resp=>{
alert(resp.data);
})
}
hi.onclick = function(){
axios.get("http://localhost:8082/hi?name=张三")
.then(resp=>{
alert(resp.data);
})
}
</script>
</body>
</html> 
首先肯定是跨域，点击hi 的话会报错，当hiController中添加@CrossOrigin(origins = "*")
就ok了
2.通过全局配置解决跨域请求
如果说你有好多Controller 每一个都要配置，那么不值当的，所有可以用这种方法
@Configuration
public class DemoWebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 匹配了所有的URL
.allowedHeaders("*") // 允许跨域请求包含任意的头信息
.allowedMethods("*") // 设置允许的方法
.allowedOrigins("*") // 设置允许跨域请求的域名
.allowCredentials(false); // 是否允许证书，默认false
}
}
