【微服务】144:跨域问题及其解决方法

今天是刘小爱自学Java的第144天。

感谢你的观看,谢谢你。

[图片上传失败...(image-8ebf29-1600859064323)]

学习计划安排如下:

  • 关于昨天编写的商品分类业务,访问方式的回顾以及补充,发现在管理系统中访问会报错。
  • 浏览器直接访问没事,但是在管理系统中访问会报错,从而引出跨域问题。
  • 使用CORS解决跨域问题,通过其解决流程回顾两个非常重要的知识点。
  • jdk8的新特性方法引用、以及SpringBoot中的Java配置类的回顾

一、跨域问题的引出

对昨天商品分类业务回顾及补充:

[图片上传失败...(image-8f954e-1600859064323)]

昨天说明了第①种和第②种访问方式。

在后台服务器中编写代码接受对应的请求,从数据库中查询到对应数据并响应。

①直接访问自然是没问题的。

②通过网关,其相当于在直接访问的路径上做了一个保护,最终还是会跳转该路径。

其实第③种方式直接使用网关域名访问也是可以的,在前天使用nginx时配置了网关域名。

以上三种方式都没问题,证明代码本身编写的没有问题,但是在管理系统中发送请求时会发现浏览器会报错。

[图片上传失败...(image-1442a8-1600859064323)]

在前端页面中,点击分类管理,我们通过浏览器F12可以查看其发送的请求路径。

该路径和第③种访问方式是一样的。

为什么自己在浏览器中输入该路径能访问,但是在管理系统中发送请求会失败呢?

这就涉及到了一个跨域问题。

那到底什么是跨域?

跨域是指跨域名的访问,有三种情况:

  • 域名不同的跨域。
  • 域名相同、端口不同的跨域。
  • 二级域名不同的跨域。

而我们刚才浏览器为何报错?就是因为二级域名变了,从而导致了跨域。

[图片上传失败...(image-f5a994-1600859064323)]

注意:关于域名、二级域名的概念我不能在文章中举例说明,前天就是文章中出现域名而被举报了,上图简单说明下,也很好理解。

那为什么有跨域问题?

假设我有一个网站,另一个人看我不爽,天天通过不同的渠道疯狂攻击我的网站。

如果没有跨域问题,他就可以通过跨域不断地对我的网站发送ajax请求从而攻击。

所以跨域问题本质上是浏览器对于ajax请求的一种安全限制,这本身并不是坏事,更安全。

二、如何解决跨域?

跨域问题既然是为了阻止跨站攻击,那要解决这个问题又该怎么办呢?

其实很简单,哪个域名要访问我?我同意就好了,就跟我们设置白名单一样的道理。

我们使用的是通过cors方式去解决跨域问题,关于cors,不用过于去深究,对其实现思路有一个清晰的认识即可。

1网关编写配置信息

现在是后台管理系统对应的域名要访问网关对应的域名,所以在网关微服务配置就好了。

[图片上传失败...(image-345b41-1600859064324)]

不要看这个配置信息好像有点复杂,但其实明白属性的意思也就好理解:

  • allowedOrigins:设置能跨域访问我的域名,其中*号代表任意域名。
  • allowCredentials:是否允许携带cookie?默认情况下值为false。
  • allowMethod:接受的请求方式。
  • maxAge:本次许可的有效时长,单位是秒。
  • allowHeaders:请求头信息。
  • path:“/**”表示的是拦截对应域名下的所有请求,也可以自行设置请求路径。

核心关键是第1个属性,也就是白名单。

注意:这里使用的是SpringBoot中的Java配置,老实说太久没用有点忘了。

在我第131天的学习笔记中有详细说明,做了一个回顾也就想起来了。

2编写CORS配置类

[图片上传失败...(image-7e898f-1600859064324)]

注意其参数也就是我们刚编写的Java配置类。

①添加配置信息

方法引用的使用,我以其中一个例子说明:

config要通过addAllowedMethod()方法添加允许的请求方式。

但是在配置信息中请求方式有好几个,先获取allowMethod属性,结果是一个集合。

所以要将该集合遍历,再将遍历后的数据一个一个地添加到config中。

这样操作下来就很是麻烦,而使用方法引用一行代码就搞定了,其作用是一样的。

注意:关于方法引用,第50和51天的学习笔记中有详细说明,做了一回顾也就想起来了。

②添加映射路径

这里就相当于设置了一个白名单,这个域名可以访问我,但是我也可以指定其路径。

也就是说你这个域名虽然可以访问我,但是你的每个请求我并不一定都会接受。

当然例子中设置的是/**,表示所有请求。

三、测试

cors配置好后,就能解决跨域问题了:

[图片上传失败...(image-b0f505-1600859064324)]

通过测试结果我们可以发现:

在后台管理系统对应的前端页面,可以访问另一个域名,从而解决了跨域问题。

浏览器上也没报错,页面也有了数据。

这些数据也就是最先开始访问服务器得到的数据,只不过被渲染到对应的vue组件中了。

最后

行为不得反求诸己,大家好,我是@刘小爱。

一个白天上班晚上学习的95后沪漂,不为其它,只为学会自律做好自己,也愿我的每日打卡能给你带来勇气,欢迎点赞关注和评论。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342