记录一个跨域相关的疑难杂症
2018-12-18 liyangcoder PHP
最近在做一个前后端完全分离的项目,这其中自然少不了一个经典的话题——跨域。
前端用的uniapp,后端用的Laravel。
前者刚刚开始接触,用后者也从来没有做过前后端分离的项目,正因为两个都不是特别的熟悉,导致这次在坑中摸爬滚打了好久才爬出来。
跨域的问题显而易见,处理起来一般两种做法,一种是jsonp,另一种就是设置header使之支持跨域(程序或者服务器)。
我选择的是在Laravel中创建中间件的方式,具体如何创建,直接互联网搜索,内容大同小异,很容易实现,这里我就不赘述了。
我的接口是一个商品列表,接口返回一个包含10个商品的json。
做好中间件后,在Chrome浏览器(Chrome的手机模拟器很好用,所以开发手机页面我都用Chrome)上访问页面,竟然给我报出了跨域的错误。
于是开始了漫长的排错之路。
1.检查中间件是否有错误 未果
2.检查引入中间件是否有错误 未果
3.尝试不同的路由写法 未果
4.使用Firefox浏览器测试 正式这次测试,让我又进入了另一个大坑
详细说一下第4点,上面也说到了,使用Chrome浏览器报跨域的错误,而Firefox浏览器却没报错,并且从控制台里还可以看到接口的返回值,但是,页面上仍然没有显示数据。
这甚至让我怀疑是不是浏览器有问题,研究了半天,然并卵。
这时候从网上看到有人说到类似的问题,他说他的数据比较大的时候,通过header设置的跨域就失效了。
顿时像是发现了新大陆,我把原本返回10条数据的接口改成返回1条数据,还真的就正常了。顺水推舟我又验证了一下中间件以及路由的各种配置,实时证明我写的中间件是有效果的。
下面开始进入到另一个纠结的地方,为什么数据变大就不能跨域了呢?
一番搜索之后,依然未果,这时候我注意到了Chrome浏览器提示的一段警告信息,大意就是CORB阻止了一个MIME类型为html/text的请求。仿佛突然见到了曙光,很可能是接口返回的数据中的Content-Type问题,为了开发方便,我是在控制器中直接echo出的接口值,改成return一个数组试了一下,Content-Type变成application/json了,返回再多的数据也没问题了。
这里推荐一个跨域中间件,好多人验证过的东西,一般不会有什么大问题,如果我一开始就用这个的话,应该能节省不少时间,至少可以节省调试自己写的中间件的时间。
https://github.com/barryvdh/laravel-cors
评论:
It's me!
liyangcoder
.:.:.:.:.:.:.:.
一个用着普通人不理解的语法和符号,与某个世界的自然法则相沟通,进而实现人类需要的奇迹的人,相当于远古时代的 巫师 ……
哥从不会寂寞
-
因为有陪着哥~~~
最新评论
- 李杨
咋俩同名哎,我闲的没事做 搜索自己的名字... - repostone
https也快能拦截了。 - Am
有女朋友吗 - Tww
你现在在腾讯工作吗? - 高中作文
感谢分享 - 网站建设
学习了 - 独爱
大神 安装libxml2-devel 总... - 网站建设
文章不错 - 网站建设
很好的分享 - 天津网站建设
很给力,学习了。
听我说
- 从2018年冬天开始,有时候想要喝热水了,之前都是一年四季凉水,冬天都恨不得喝冰水!这可能是一个需要记录的时刻……
2019-01-08 14:16
- 记得上小学的时候,老师说文章的标题要尽量概括文章的内容,但是现在发现,我们看到一篇文章,却就是不告诉你真实的内容。这是进步吗?
2016-11-17 23:44
- 由于将博客放在了一个不靠谱的服务器上,导致所有附件和站内图片以及少量博客和朋友们的留言丢失。后面我会逐渐将附件和图片补上,至于一些内容,怕是找不回来了~~~
2016-06-25 17:05
- 如果我发明一副美颜眼镜,带上后,男人不会嫌女人不漂亮了,女人也不会嫌男人不帅了,岂不是随时都能赏心悦目了?全国人民都强制佩戴,和谐社会立马就实现了,这玩意必定大卖啊!哈哈哈~~~
2016-02-11 23:24
- 问:产品经理哪些话最暴露对编程的无知?
答:为什么要这么久?
2015-07-02 12:29
那些日子
- 2020年12月(1)
- 2020年11月(2)
- 2020年10月(1)
- 2020年9月(1)
- 2020年8月(1)
- 2020年3月(4)
- 2020年2月(3)
- 2020年1月(1)
- 2019年12月(1)
- 2019年11月(1)
- 2019年9月(2)
- 2019年8月(1)
- 2019年7月(1)
- 2019年6月(1)
- 2019年5月(1)
- 2019年4月(2)
- 2019年3月(4)
- 2018年12月(1)
- 2018年11月(3)
- 2018年9月(2)
- 2018年7月(1)
- 2018年6月(2)
- 2018年5月(3)
- 2018年4月(4)
- 2018年3月(1)
- 2018年1月(2)
- 2017年11月(2)
- 2017年10月(1)
- 2017年9月(3)
- 2017年8月(1)
- 2017年7月(3)
- 2017年6月(3)
- 2017年5月(1)
- 2017年4月(3)
- 2017年3月(1)
- 2017年2月(2)
- 2017年1月(1)
- 2016年12月(1)
- 2016年11月(3)
- 2016年10月(4)
- 2016年9月(2)
- 2016年8月(10)
- 2016年7月(2)
- 2016年6月(7)
- 2016年5月(3)
- 2016年4月(1)
- 2016年3月(1)
- 2016年2月(3)
- 2016年1月(3)
- 2015年12月(6)
- 2015年11月(4)
- 2015年10月(6)
- 2015年9月(4)
- 2015年8月(4)
- 2015年7月(2)
- 2015年6月(1)
- 2015年5月(3)
- 2015年4月(2)
- 2015年3月(1)
- 2015年2月(1)
- 2015年1月(1)
- 2014年12月(1)
- 2014年11月(4)
- 2014年10月(4)
- 2014年9月(5)
- 2014年8月(4)
- 2014年7月(7)
- 2014年6月(15)
- 2014年5月(10)
- 2014年4月(9)
- 2014年3月(5)
- 2014年2月(8)
- 2014年1月(6)
- 2013年12月(12)
- 2013年11月(33)
- 2013年10月(25)
- 2013年9月(10)
- 2013年8月(10)
- 2013年7月(12)
- 2013年6月(16)
- 2013年5月(1)
- 2013年4月(2)
2019-01-28 14:13