microsoft edge允许跨域_前后端跨域问题解决记:转变一下思路也许会柳暗花明

如果您是一名老程序员,那么您一定在开发中遇到过很多坑,或浅或深,但唯一不变的是不是刚填完坑就是在填坑的路上。如果您是一个刚入行的新手,那么恭喜您入坑,长路漫漫,祝君好运。

69edb671541a7cea912c6efb2a220e37.png

最近打卡君很忙,为了一个公司的项目,要赶在春节前完成上线。可谓时间紧,任务重,但既然是决定要用这样的技术方案,那就一个定字:干。当然,不干也没办法。哈哈,闲话少扯,言归正传。这次项目确实遇到了一些曲折的技术问题,如果项目总是一帆风顺的进行下去,我们该是多么的无聊啊,又该如何进步呢?

项目的前期是很顺利的,前端框架,业务模块,划分开发有序进行,但当业务模块开发接近尾声的时候,我们发现一个致命问题。前端和后端存在跨域问题,有读者可能是资深老猿,读到这里可能会嗤之以鼻很疑惑:“这不是一个老生常谈的问题吗?这种问题也叫问题”。您先别急,请接着往下看。

其实在开发中,前后端分离,确实是一个最显眼的问题,也很好解决。可能就是一个CORS的问题,那么让后端配合改成允许前端域名跨域就可以了。

这一点,我们改了,当然有用,也解决了开发时的问题。在开发中,我们发现Chrome一直是好的,但IE不行。所谓一入前端深似海,大概就是这个原因吧,明明有些超前新颖的技术,可是用不上或者说不让用。您可能会问:“为什么?” 因为IE,IE对前端确实是一个大敌人,我不仅有IE,我还有IE七、八、九、十、十一。好像IE在指着每一个前端的鼻子得意洋洋的说:“小样,跟我闹,看我不玩死你。”这还不是最闹心的,闹心的可能你还在一个需要IE八、九的公司或团队,这时,IE更掂着一只脚,连掂边嘚瑟:“我就想看你的一个笑话,看你怎么应付我。”然后对着你做个鬼脸。面对这种情况,你能怎么办?暴打一顿么?也就心里咒骂几句罢了,该解决的问题,该应付的技术,一个都不能少。

IE不行也有解决方案,如果用的是jquery的Ajax,再加一个

jQuery.support.cors = true;

妥妥的解决问题。

是的,如我们所愿,解决了。那么问题结束了吗?

如果就这样结束,这对一名像打卡君这样的老猿来说(开玩笑的,且莫当真),算问题吗?

这也是为什么我们到了业务模块开发的尾声才发现致命问题的原因,因为我们做接口联调的时候是连的后端开发人员的电脑或者开发服务器,跟线上环境有一定的区别,具体的区别就是开发环境的接口为Http协议,线上的接口环境为Https协议。这就是问题所在,本来业务跑的挺顺畅,打卡君心里还暗暗窃喜,总算黑天白夜的加班没有白费,要结束了,一切尽在掌握中。Chrome、FF、Edge,一切看起来那么美好,接下来的事可能您也猜到了。故事的剧情往往就是这样,小说、电视剧、电影都是这样的套路,越是顺利的时候,越是这里的黎明静悄悄,往往伴随着无限杀机。

黑天鹅浮现,当将Edge切到IE八或九的时候,在开发环境中依然是完美的。但当我们把前后端都发布到一个和生产环境相似的服务器时,IE八和九罢工了。在这样一个静悄悄的加班瞬间,身体和精神都很疲惫的时候。正是发生在各种业务模块接近尾声,项目要大功造成之际。

惊喜吗?意外吗?

所谓希望越大,失望越大。这就像我们人生在低谷之时,又遇到糟心之事。屋露偏逢连阴雨,也像当时窗户外面淅淅沥沥不停的阴雨,在这个南方城市,已经滴滴答答一个礼拜。心情也跟着潮湿起来。

这时,看古人的话是多么的智慧,范仲淹劝我们说:不以物喜,不以己悲。

且莫人生得意马蹄急,也休要失魂落魄醉酒家。

出现问题,解决问题。你的锅,谁也替你背不了。当你侃侃而言,游说四方,来推动这个事的时候,坑有了,自己跳下去吧。

打卡君回忆起整个前端生涯,确实没有解决或遇到过这种问题,或者说这不属于前端范畴?但在这个问题出现的当时,打卡君觉得就是一个技术问题,你没有在IE八或九下调通后端的Api。难道不是你的代码问题?

在思维陷入这个狭窄的深渊,再也出不来,在查遍各种搜索引擎及各种开源技术论坛,大概得出了一些技术结论。大概的意思基本归结为一种,用jquery的一个插件:

jquery.xdomainrequest.js

但限制有以下几点:

  1. 仅能用GET或POST的请求
  2. POST的请求下ContentType只能用text/plain
  3. 前后端http或https协议必须一致
  4. 仅限异步请求
  5. 不能带cookie

这些限制,1、3和4还好说,2和5真是要了命。后端接口不接收text/plain,而为了新老系统的兼容性,cookie也必须得带。

解决这个问题时,心里很焦急,时间也很快。当时的心情变化是这样的(从发现问题开始):

  • 5分钟后:我好像跳进大坑了。
  • 半小时后:日,网上怎么都查不到资料啊
  • 一个小时后:一位智者说过,如果你一个小时还没有解决这个问题,就休息一下吧,我想,此话有理,我起身上了趟厕所。

十分钟过后,回来继续战斗。

  • 两小时后:天了撸,告国外大神吧,查查国外的解决方案

依旧无解

....

  • 三四小时后:完了,我要被这个技术困死了,让你还执意推前后端分离,作死了吧。

在解决这个问题四五个小时后,打卡君依旧未找到问题好的解决方案,只有央告各位后端大神,在这个时候,后端告之,待研究。但协议前后端已约定好,就是json,而cookie不带上,不能新老系统兼容,这个问题有点复杂呵。

五味杂阵,在当天没有解决这个问题,也许是当日事当日毕的个人习惯,也许是对技术的好奇心和求知欲,当打卡君拖着疲惫的身躯回到家中,一夜时间反复难眠,在考虑该如何度过这个技术难关。

前面说做技术的人容易陷入技术领域的牛角里,其实问题往往并未有我们想象的复杂,只是在你的技术领域或者擅长的技术下解决不了或者解决不好。这可能也许正是所谓灵光一现的时候。我们要回到问题的本源,

我们要解决什么问题?跨域问题。

为什么会出现跨域问题?域名不一致。

现有的技术为什么解决不了IE八和九?因为八和九太老,当时可能未前后分离或者未考虑https.

那么如果域名一致还会不会出现跨域问题?当然不会。

好的,我们现在只是要把域名转成一致,在当前项目的技术框架下,前后分离是注定的,域名不一致也是注定的,我们怎么把前后端造成一致,或者说是转成一致,是我们解决问题的关键所在。如果有Node中间层,用中间层去代理后端的接口给前端掉用?是不是有能解决这个问题?答案是能的。可是当时开技术方案确定会的时候,为什么打卡君要劝去掉呢?因为有代替方案,Node是个鸡肋。那么代替方案是什么?nginx。

具体解决方案如下:

7bc17a628d63779cc2bc4c82979c251a.png

到这里,打卡君恍然大悟,大骂自己太笨。是啊,当时的想法确实是这样,为何如今陷进了技术的死胡同?疲劳乎?经验邪?

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值