-、跨域问题以及使用@CrossOrigin解决

最新推荐文章于 2023-08-11 09:15:10 发布

我钟意饮王老菊

最新推荐文章于 2023-08-11 09:15:10 发布

阅读量520

点赞数 1

文章标签： springboot 跨域

本文链接：https://blog.csdn.net/awake_lqh/article/details/102551370

版权

先介绍一下什么是跨域：

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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/

我钟意饮王老菊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
-、跨域问题以及使用@CrossOrigin解决

先介绍一下什么是跨域：跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；站在巨人的肩膀上）跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同源是指，域名，协议，端口均相同...
复制链接

扫一扫