Spring Boot（十四）-- 跨域问题

最新推荐文章于 2024-03-23 10:19:44 发布

知性人

最新推荐文章于 2024-03-23 10:19:44 发布

阅读量279

点赞数

分类专栏： Spring Boot 文章标签：跨域问题 Spring Boot

本文链接：https://blog.csdn.net/LOYE_YOU/article/details/97681426

版权

Spring Boot 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

当下前后端分离技术已经成为主流，那么分离之后会我们难免会遇到跨域问题，前端无法访问后端的接口，今天小编今天就给大家说说这个跨域问题。

什么是跨域？

跨域是指的不同域名之间互相访问。跨域指的是浏览器不能执行其它网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全措施。

例如：如果在 A 网站中，我们希望使用 Ajax 来获得 B 网站中的特定内容，如果 A 网站与 B 网站不在同一个域中，那么就出现了我们今天要说的跨域问题。

什么是同一个域？

同一协议、同一IP、同一端口三者中有一个不同就会产生跨域。

什么是同源策略？

同源策略是由 Netscape 提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同。

同源策略的作用

同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，由于各种原因又经常有跨域的需求，传统的跨域方案是 JSONP，JSONP 虽然能解决跨域但是有一个很大的局限性，那就是只支持 GET 请求，不支持其他类型的请求。

对于传统的跨域方案是 JSONP 的局限性，今天我们就说说 CORS，亦译为跨域资源共享，是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 请求方法以外也支持其他的 HTTP 请求。

跨域问题

想要了解怎么解决跨域，我们先看看怎么才能出现跨域问题，这里小编就举个简单的例子：
1、首先我们先创建两个普通的 Spring Boot 项目，一个端口为 8081，一个端口为8082，然后在其中一个项目中提供一个 HelloController 接口，如下：

@RestController
public class HelloController {

    @RequestMapping("/hello")
    public String hello() {
        return "hello";
    }
}

2、然后我们在另外一个项目的 resources/static 目录下创建一个 index.html 文件，写一个简单的 ajax 请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
    <div id="msg"></div>
    <input type="button" value="获取数据" onclick="getMsg()">
    <script>
        function getMsg() {
            $.get('http://localhost:8081/hello',function (msg) {
                $("#msg").html(msg);
            })
        }
    </script>
</body>
</html>

3、然后分别启动项目：浏览器访问 http://localhost:8082/index.html ，我们可以在浏览器的控制台报如下错误：
在这里插入图片描述

index.html:1 Access to XMLHttpRequest at 'http://localhost:8081/hello' from origin 'http://localhost:8082' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

通过错误提示，我们可以看出，由于同源策略的限制，请求无法发送成功。

使用 CORS 解决跨域

使用 CORS 解决跨域有两种方式：

第一种方式：使用注解 @CrossOrigin
第二种方式：自定义一个全局配置类重写 WebMvcConfigurer 接口中的 addCorsMappings 方法。

使用注解 @CrossOrigin 解决跨域

在要访问的接口方法上添加该注解，如下：

@RestController
public class HelloController {

    @RequestMapping("/hello")
    @CrossOrigin("http://localhost:8082")
    public String hello() {
        return "hello";
    }
}

启动项目，再次访问：http://localhost:8082/index.html
在这里插入图片描述
这时，数据也拿到了，跨域问题也解决了。

第二种方式

如果使用上面的方法，我们需要对每一个方法上都去加注解，这样未免太麻烦了，在 Spring Boot 中，还可以通过全局配置一次性解决这个问题，全局配置只需要在配置类中重写 addCorsMappings 方法即可，如下：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer{

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8082")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}

启动项目，访问，结果一样可以访问成功：
在这里插入图片描述
今天的问题就介绍到这里，感谢阅览！！！

知性人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot（十四）-- 跨域问题

当下前后端分离技术已经成为主流，那么分离之后会我们难免会遇到跨域问题，前端无法访问后端的接口，今天小编今天就给大家说说这个跨域问题。什么是跨域？跨域是指的不同域名之间互相访问。跨域指的是浏览器不能执行其它网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全措施。例如：如果在 A 网站中，我们希望使用 Ajax 来获得 B 网站中的特定内容，如果 ...
复制链接

扫一扫