记录一个跨域相关的疑难杂症

2018-12-18 liyangweb.com 李杨 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

标签: Laravel 跨域

评论:

天津网站建设
2019-01-28 14:13
很给力,学习了。
跨境电商之家
2019-01-28 10:34
给力!谢谢分享!
uv喷绘
2019-01-25 18:46
挺实用
网站建设
2018-12-24 11:37
不错,学到了

发表评论:

Powered by emlog 冀ICP备13011830号-1