微人事第四天:跨域问题

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

同源策略是由 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类的方法下都需要添加这个注解,那就显得太麻烦了,所以我们需要换种策略。

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

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,显示:
在这里插入图片描述

发布了287 篇原创文章 · 获赞 24 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览