最近在做一个前后端完全分离的项目，这其中自然少不了一个经典的话题——跨域。
前端用的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了，返回再多的数据也没问题了。
这里推荐一个跨域中间件，好多人验证过的东西，一般不会有什么大问题，如果我一开始就用这个的话，应该能节省不少时间，至少可以节省调试自己写的中间件的时间。
不错，学到了
挺实用
给力！谢谢分享！
很给力，学习了。