当下前后端分离技术已经成为主流,那么分离之后会我们难免会遇到跨域问题,前端无法访问后端的接口,今天小编今天就给大家说说这个跨域问题。
什么是跨域?
跨域是指的不同域名之间互相访问。跨域指的是浏览器不能执行其它网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 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("*");
}
}
启动项目,访问,结果一样可以访问成功:
今天的问题就介绍到这里,感谢阅览!!!