这里看的视频系统学习的晓风轻大神

定义

前端因为和后端不是一个域的请求不到后端接口
前端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

ajax跨域问题(一)

ajax跨域问题(一)

定义

产生原因

对应的解决思路

推荐阅读更多精彩内容