我正在参与「启航计划」
作者：bug菌
简介：CSDN/阿里云/华为云/51CTO博客专家，历届博客之星Top30，年度人气作者Top40，51CTO年度博主Top12，/InfoQ/51CTO等社区优质创作者，全网粉丝算计10w+，硬核公众号「猿圈奇妙屋」，欢迎你的参加！免费领取简历模板/学习材料/大厂面试真题等海量材料。
✍️温馨提醒：本文字数：1999字, 阅读完需：约 5 分钟
1. 前语
跨域，一个陈词滥调的话题，不论前端后端，跨域都会遇到。而今日，我就跟咱们分享一篇关于【跨域】的文章，希望能给咱们带来点不一样的收成。
2. 环境阐明
环境阐明：Windows10 + Idea2021.3.2 + Jdk1.8 + SpringBoot 2.3.1.RELEASE
3. 什么是跨域？
首要，请问咱们个问题，什么是跨域？估量很多小伙伴都会这么回答，跨域不便是只需恳求的 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/ 跨域原因：子域名不同。
4. 为什么会跨域？
已然清楚了跨域概念，那你们知道为何会呈现跨域嘛？这其实就得从浏览器层出发了。之所以会产生跨域，便是因为浏览器的同源战略，浏览器对javascript施加的一种安全约束。
所谓同源战略，能够看成是一种约定，它是浏览器最中心也是最基本的安全功用，假如缺少了同源战略，则浏览器的正常功用都可能会受到影响。能够说Web是构建在同源战略根底之上的，浏览器只是针对同源战略的一种完成。同源战略会阻挠一个域的。javascript脚本和别的一个域的内容进行交互。所谓同源（即指在同一个域）便是两个页面具有相同的协议，域名和端口。
5. 如何处理跨域？
当咱们对跨域概念有一定的根底认知之后，咱们就应该要学习如何处理跨域这种问题，你知道跨域，但你假如不会处理跨域，那就很掉身份啦，因为处理跨域的办法很多很多，你只需求知道常用的几种处理办法就好了，又不是让自己都得把握，对吧。
所以，接下来，我给咱们诺列了处理跨域的一些办法，不要求咱们都能把握，但好歹知道这种办法能处理跨域即可。详细如下：
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协议的服务器上才干正常作业。
6. springboot跨域装备
接着，咱们通过在springboot项目中装备cors，起到避免跨域的目的。因为springboot自身就支撑cors，所以你只需求完成addCorsMappings接口，就能够增加规矩来答应跨域拜访，详细代码如下，咱们请看：
/**
* 跨域装备
*/
@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的域名拜访，那你能够这么设置：
.allowedOrigins("http://www.test.com")
再比方限定只能对/test下的所有接口进行跨域拜访，同时只能拜访GET和POST 办法，那你这样设置即可。
registry.addMapping("/test/**") .allowedMethods("POST", "GET");
… …
ok，以上便是我这期的全部内容啦，假如还想学习更多，你能够看看我的往期热文引荐哦，每天积累一个奇淫小知识，日积月累下去，你一定能成为令人敬仰的大佬。
「赠人玫瑰，手留余香」，咱们下期拜拜~~
7. 文末
我是bug菌，一名想走出大山改变命运的程序猿。接下来的路还很长，都等待着咱们去突破、去挑战。来吧，小伙伴们，咱们一同加油！未来皆可期，fighting！
感谢仔细读完我博客的铁子萌，在这里呢送给咱们一句话，不论你是在职仍是在读，肯定终身受用。
时间警醒自己:诉苦没有用，一切靠自己想要过更好的日子，那就要逼着自己变的更强，日子加油。
