微人事第四天：跨域问题
要知道什么是跨域问题首先要了解同源策略：
很多人对跨域有一种误解，以为这是前端的事，和后端没关系，其实不是这样的，说到跨域，就不得不说说浏览器的同源策略。
同源策略是由 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，显示：
上一篇： 字符串循环右移
下一篇： C语言：字符串循环右移