这里看的视频系统学习的 晓风轻大神
定义
前端因为和后端不是一个域的 请求不到后端接口
前端8081端口
$.getJSON("http://localhost:8080/test/get1").then(function(result) {
console.log(result);
});
后端8080端口:
@RestController
@RequestMapping("/test")
public class TestController {
@GetMapping("/get1")
public ResultBean get1() {
System.out.println("TestController.get1()");//打印一下
return new ResultBean("get1 ok");
}
请求结果
1.png
这样看起来一切正常200
后台方法也真的被成功调用了
2.png
但是页面上没看到数据
控制台报错为
3.png
No 'Access-Control-Allow-Origin' 这就是跨域访问安全问题
产生原因
1. 是浏览器限制的,处于安全原因阻止了,其实服务端来看已经被访问成功
200 并且服务端对应的controller方法也进去了
2. 不是同一个域
协议/域名/端口 有一个不一样 就不是一个域
注意Origin头.png
注意: 浏览器 是知道这是跨域请求的 跨域时会加一个Origin头 标明本域,
如果返回的服务端返回的数据 没有写明可以让这个origin 跨域, 返回数据到了以后.浏览器也会把它拦住
3. 发出的是XHR请求
加一个<img> 不是xhr请求的试试,这个就能成功
<img src="http://localhost:8080/test/get1">
<script>
function get1() {
$.getJSON("http://localhost:8080/test/get1").then(function(result) {
console.log(result);
});
}
</script>
发出2个跨域请求 一个是json请求 一个是xhr请求
network能看到2个请求.png
但是控制台只看到一个报错.png
对应的解决思路
1. 浏览器限制
浏览器设置一下 不去限制 ,没有意义 不可能去改每个客户的浏览器
2. 解决跨域
a域名调用b域名
被调用方解决: 支持跨域. b根据http协议关于跨域的要求,在返回里面加入一些字段,指明可以被a跨域,但是要是b不是我方的,没办法改 就不行了
调用方的解决: 隐藏跨域. a通过代理,达到实际上是b调用b
3. 发出的请求类型是XHR请求
JSONP :原理是动态创建一个scrip,在其中放出跨域的请求
不能满足现代的很多要求 已经不怎么用了
解决思路.png
