微人事第四天：跨域问题

要知道什么是跨域问题首先要了解同源策略：
很多人对跨域有一种误解，以为这是前端的事，和后端没关系，其实不是这样的，说到跨域，就不得不说说浏览器的同源策略。

同源策略是由 Netscape 提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同。同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，由于各种原因又经常有跨域的需求，传统的跨域方案是 JSONP，JSONP 虽然能解决跨域但是有一个很大的局限性，那就是只支持 GET 请求，不支持其他类型的请求，而今天我们说的 CORS（跨域源资源共享）（CORS，Cross-origin resource sharing）是一个 W3C 标准，它是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，这是 JSONP 模式的现代版。

在 Spring 框架中，对于 CORS 也提供了相应的解决方案，今天我们就来看看 SpringBoot 中如何实现 CORS。

现在通过一个实际案例来解释什么是跨域问题：
1.首先创建springboot项目名称叫cors1
在这里插入图片描述
2.在该项目中写一个简单的controller类

package org.javaboy.cors1;

import org.springframework.web.bind.annotation.GetMapping;

public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "hello cors!";
    }
}

也就是当我们访问的路径最后是/hello页面就会显示“hello cors”
3.现在来创建另外一个springboot项目名称叫cors2
在这里插入图片描述
4.在配置类中修改项目端口(为了与项目1区分开来)

server.port=8081

5.写一个html文件作为前端界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <input type="button" value="GET" onclick="getData()"/>
<script>
    function getData() {
        $.get('http://localhost:8080/hello',function (msg) {
            $('#app').html(msg);
        })
    }
</script>
</body>
</html>

实现原理：通过访问index.html中的界面，通过ajax的异步请求到cors1中的controller类中的方法。现在来看看是否能够成功访问
6.访问路径：http://localhost:8081/index.html
点击GET之后页面没有反应，控制台报错：
在这里插入图片描述
8081端口的服务器无法访问到8080端口的服务器，可以看到，由于同源策略的限制，请求无法发送成功，这就是所谓的跨域问题。

如何解决跨域问题呢？
我们在控制类方法前加上注解：

@CrossOrigin(origins = "http://localhost:8081")

这个注解表示同意接收来自端口8081服务器的请求

再次访问:http://localhost:8081/index.html 点击get，成功返回字符串。
在这里插入图片描述
这样似乎看起来就能解决跨域问题，但是问题是以后需要在每一个controller类的方法下都需要添加这个注解，那就显得太麻烦了，所以我们需要换种策略。

我们需要通过增添配置类来解决跨域问题：

扫描二维码关注公众号，回复： 8872694 查看本文章

package org.javaboy.cors1;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //表示所有接口都允许跨域
        registry.addMapping("/**").allowedOrigins("http://localhost:8081")
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(30 * 1000);
    }
}

addMapping表示所有的接口都允许跨域请求
allowedOrigins(“http://localhost:8081”)表示允许来自8081端口服务器的请求
allowedHeaders("")表示允许所有的请求头发出请求
allowedMethods("")表示允许所有的请求方式发出的请求
现在再来访问路径http://localhost:8081/index.html
点击get，显示：
在这里插入图片描述

YRZ-James

发布了287 篇原创文章 · 获赞 24 · 访问量 2万+

私信关注

微人事第四天：跨域问题

猜你喜欢