跨域,一个老生常谈的话题,不管前端后端,跨域都会遇到。而今天,我就跟大家分享一篇关于【跨域】的文章,希望能给大家带来点不一样的收获。
js复制代码环境说明:windows10 + Idea2021.3.2 + Jdk1.8 + SpringBoot 2.3.1.RELEASE
首先,请问大家个问题,什么是跨域?估计很多小伙伴都会这么回答,跨域不就是只要请求的 url 不同,就会造成跨域,没错,是这样的,可否具体点?
所谓跨域,其实就好比这样,A端向B端发送请求,若B端的地址协议、域名、端口三者之间任意一个与A端的址协议、域名、端口中的一个不同,这两者访问就跨域了。
给大家举几个跨域的例子,辅助大家理解。
1.http://localhost:8080/ -> http://localhost:9090/ 跨域原因:端口号不同。
2.http://10.10.10.10:8080/ -> http://20.20.20.20:8080/ 跨域原因:主机ip(域名)不同。
3.http://localhost:8080/ -> https://localhost:8080/ 跨域原因:域名不同(http/https)。
4.www.test.com/ -> test.test.com/ 跨域原因:子域名不同。
既然清楚了跨域概念,那你们知道为何会出现跨域嘛?这其实就得从浏览器层出发了。之所以会产生跨域,就是由于浏览器的同源策略,浏览器对JAVAscript施加的一种安全限制。
所谓同源策略,可以看成是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能都可能会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。JavaScript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议,域名和端口。
当我们对跨域概念有一定的基础认知之后,我们就应该要学习如何解决跨域这种问题,你知道跨域,但你如果不会处理跨域,那就很掉身份啦,因为解决跨域的方式很多很多,你只需要知道常用的几种处理方式就好了,又不是让自己都得掌握,对吧。
所以,接下来,我给大家诺列了解决跨域的一些方法,不要求大家都能掌握,但好歹知道这种方式能处理跨域即可。具体如下:
1.改发jsonp
利用的是 script 标签 src 属性请求 js 无跨域问题,但具有局限性,只能发送 get 请求.
2.跨域资源共享(CORS)
CORS是一个W3C标准,全称是"跨域资源共享",它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而解决了ajax只能同源使用的限制。但CORS需要浏览器和服务器都同时支持。目前,所有浏览器都支持该功能;支持各种方式请求(post,get....)。
3.Nginx代理跨域
将不同的协议、域名、端口代理到与目标url一致的处理方式。
4.nodejs中间件代理跨域
在本地启一个nodeis服务器转接代理,前端请求本地服务器,可在自己代码中设置跨域可访问,而后端转接请求后端是没有跨域问题的(需要真实请求的地址设置可访问才可取得数据)。
5.WebSocket协议跨域
它是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。 只有在支持web socket协议的服务器上才能正常工作。
接着,我们通过在springboot项目中配置cors,起到防止跨域的目的。由于springboot本身就支持cors,所以你只需要实现 addCorsMAppings 接口,就可以添加规则来允许跨域访问,具体代码如下,大家请看:
typescript复制代码/**
* 跨域配置
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
/**
* 跨域注册器
*
* @param registry 跨域注册器
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路径
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOrigins("*")
// 是否允许证书 不再默认开启
.allowCredentials(true)
// 设置允许的方法
.allowedMethods("*")
// 设置允许的头
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
}
}
通过上面的配置,我们可以看到,是火力全开啊,把所有的拦截都放开了,允许了所有的跨域域名等。你也可以单独设置添加,比如限制只允许www.test.com的域名访问,那你可以这么设置:
arduino复制代码.allowedOrigins("http://www.test.com")
再比如限定只能对 /test 下的所有接口进行跨域访问,同时只能访问 GET 和 POST 方法,那你这样设置即可。
arduino复制代码registry.addMapping("/test/**") .allowedMethods("POST", "GET");
... ...
ok,以上就是我这期的全部内容啦,如果还想学习更多,你可以看看如下的往期热文推荐哦,每天积累一个奇淫小知识,日积月累下去,你一定能成为令人敬仰的大佬。
「赠人玫瑰,手留余香」,咱们下期拜拜~~
作者:bug菌
链接:
https://juejin.cn/post/7233208763921858616