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

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

标签: Laravel 跨域

« 免sudo使用docker命令 | proc_open(): fork failed errors»

评论：

天津网站建设
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