今天是刘小爱自学Java的第144天。前端
感谢你的观看，谢谢你。vue
学习计划安排以下：nginx
-
关于昨天编写的商品分类业务，访问方式的回顾以及补充，发如今管理系统中访问会报错。 -
浏览器直接访问没事，可是在管理系统中访问会报错，从而引出跨域问题。 -
使用CORS解决跨域问题，经过其解决流程回顾两个很是重要的知识点。 -
jdk8的新特性方法引用、以及SpringBoot中的Java配置类的回顾。
1、跨域问题的引出
对昨天商品分类业务回顾及补充：web
昨天说明了第①种和第②种访问方式。ajax
在后台服务器中编写代码接受对应的请求，从数据库中查询到对应数据并响应。数据库
①直接访问天然是没问题的。跨域
②经过网关，其至关于在直接访问的路径上作了一个保护，最终仍是会跳转该路径。浏览器
其实第③种方式直接使用网关域名访问也是能够的，在前天使用nginx时配置了网关域名。安全
以上三种方式都没问题，证实代码自己编写的没有问题，可是在管理系统中发送请求时会发现浏览器会报错。服务器
在前端页面中，点击分类管理，咱们经过浏览器F12能够查看其发送的请求路径。
该路径和第③种访问方式是同样的。
为何本身在浏览器中输入该路径能访问，可是在管理系统中发送请求会失败呢？
这就涉及到了一个跨域问题。
那到底什么是跨域？
跨域是指跨域名的访问，有三种状况：
-
域名不一样的跨域。 -
域名相同、端口不一样的跨域。 -
二级域名不一样的跨域。
而咱们刚才浏览器为什么报错？就是由于二级域名变了，从而致使了跨域。
注意：关于域名、二级域名的概念我不能在文章中举例说明，前天就是文章中出现域名而被举报了，上图简单说明下，也很好理解。
那为何有跨域问题？
假设我有一个网站，另外一我的看我不爽，每天经过不一样的渠道疯狂攻击个人网站。
若是没有跨域问题，他就能够经过跨域不断地对个人网站发送ajax请求从而攻击。
因此跨域问题本质上是浏览器对于ajax请求的一种安全限制，这自己并非坏事，更安全。
2、如何解决跨域？
跨域问题既然是为了阻止跨站攻击，那要解决这个问题又该怎么办呢？
其实很简单，哪一个域名要访问我？我赞成就行了，就跟咱们设置白名单同样的道理。
咱们使用的是经过cors方式去解决跨域问题，关于cors，不用过于去深究，对其实现思路有一个清晰的认识便可。
1网关编写配置信息
如今是后台管理系统对应的域名要访问网关对应的域名，因此在网关微服务配置就行了。
不要看这个配置信息好像有点复杂，但其实明白属性的意思也就好理解：
-
allowedOrigins：设置能跨域访问个人域名，其中*号表明任意域名。 -
allowCredentials：是否容许携带cookie？默认状况下值为false。 -
allowMethod：接受的请求方式。 -
maxAge：本次许可的有效时长，单位是秒。 -
allowHeaders：请求头信息。 -
path：“/**”表示的是拦截对应域名下的全部请求，也能够自行设置请求路径。
核心关键是第1个属性，也就是白名单。
注意：这里使用的是SpringBoot中的Java配置，老实说过久没用有点忘了。
在我第131天的学习笔记中有详细说明，作了一个回顾也就想起来了。
2编写CORS配置类
注意其参数也就是咱们刚编写的Java配置类。
①添加配置信息
方法引用的使用，我以其中一个例子说明：
config要经过addAllowedMethod()方法添加容许的请求方式。
可是在配置信息中请求方式有好几个，先获取allowMethod属性，结果是一个集合。
因此要将该集合遍历，再将遍历后的数据一个一个地添加到config中。
这样操做下来就非常麻烦，而使用方法引用一行代码就搞定了，其做用是同样的。
注意：关于方法引用，第50和51天的学习笔记中有详细说明，作了一回顾也就想起来了。
②添加映射路径
这里就至关于设置了一个白名单，这个域名能够访问我，可是我也能够指定其路径。
也就是说你这个域名虽然能够访问我，可是你的每一个请求我并不必定都会接受。
固然例子中设置的是/**，表示全部请求。
3、测试
cors配置好后，就能解决跨域问题了：
经过测试结果咱们能够发现：
在后台管理系统对应的前端页面，能够访问另外一个域名，从而解决了跨域问题。
浏览器上也没报错，页面也有了数据。
这些数据也就是最早开始访问服务器获得的数据，只不过被渲染到对应的vue组件中了。
最后
行为不得反求诸己，你们好，我是@刘小爱。
一个白天上班晚上学习的95后沪漂，不为其它，只为学会自律作好本身，也愿个人每日打卡能给你带来勇气，欢迎点赞关注和评论。
本文分享自微信公众号 - 刘小爱（liuxiaoai946）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。