记一次前后端分离开发中遇到的各种坑

越学习越感觉自己了解的少，学习的知识不够扎实，以前总是感觉自己了解cors，前后台交互遇到那个经典的错误信息脑海中就会想起需要后台设置 cors 错误和代码如下。

 解决的方案也是随口说来，也就是在后台设置上如下类似的代码，

1 res.header("access-control-allow-origin", "*");

 直到这一次项目..搞得我是真的难受，这一篇文章本来想详细写一些 cors的东西的，没想到跑题了。

说起来从开始接触node到现在也有一年多的时间了，平时也是经常看文章，看书中的知识一直积累着知识。一般的后台的东西也是知道一些的，也可以做一做。

这一次项目和java后台对接一个手机端h5的微信公众号的项目，后台三个，前端三个，历时三周，当然我是最菜的那个。

我们是前后端分离开发，我们在深圳，后台在云南。分离的也够彻底了吧。

平时遇到问题你听不懂我在说什么，我们也不知道你们在干什么，经常深入交流到晚上十一点之后，好在我们都年轻，经得起折腾。好了不说废话了，说一说这次遇到的各种问题，在这里做一下总结。

我们和后台关系挺好的，每次的问题都是大家一起努力解决，虽然好多问题，但是还是一条心，挺好的。

 

一、ui图 vs 业务

我们是使用vue-cli开发的项目，(用框架写代码还是很舒服的)刚开始开发几天我们解决了前端的静态页面，本来之前我们都是前端来定义项目中的数据格式的，工作不到一年的时间我见到的数据格式不是我们部长给我定义的，就是在我定义之后询问他经过他几次修改的，所以也没有想那么多，感觉数据都挺好的， 这次后台都没有看到ui图，直接根据业务来写出来的数据接口。我是真的难受了，几张表连接一下把所有的数据都返回出来就算完成了吗，而且也是刚开始，他们那边也没有数据，搞得好多字段全部都是 null，弄的页面很是蛋疼。

一周多的时间都是在企业微信群里面问数据接口好了吗？截图噼里啪啦的就怼上去几张。我还是感觉数据库的关系表要按照正常的来定义，但是返给前台的数据格式还是让一些经验丰富的前端来定义好一些，因为这次他们根本都没有看ui图导致感觉所有的接口都被重新写了一遍一样。而且那种格式也就是连表查询吧。需要什么加什么。

 

二、跨域问题

搞不懂为什么在node中那么简单的几行代码可以解决跨域的问题，到了java那里有那么麻烦吗。设置一下允许所有的域访问就可以了，后来看到他的代码也就是加了几个东西，他的截图。就这一张吧

感觉也就是这个不知道他们是不是没有做过类似的东西，跟他们说跨域，啊？我用postman可以访问的到啊。我访问你妹哦。你们怎么写的，然后截图postman的截图，我们写代码使用你们的测试工具写吗。

 

三、token的验证

因为我们做了token验证，我不知道真正的是不是这样的，我之前做了两次都是我们这样的。

我不知道那个发送过期（或者错误的）后台要返给我们一个固定的状态代表这个token过期了这一步是不是必要的，我之前做的都是这样的，所以这次也让他们改了，他们之前都没有做发送过期token要怎么样的感觉，而且这个token的接口和另外请求数据的接口在服务器的不同的端口上面。

前端这里最开始是我在搞，最后面就不是我在弄了，因为他们后台的验证token的那些东西没有做好卡了我们四天多进度，后面还是让后台先把这个东西去掉测试的其他的东西，昨天他们才加上的token，直到今天才刚把这个发布到生产环境中。

不知道他们那里怎么做的，只要带上 authorization 就不会跨域，只要不带这个东西就会报跨域的错误。指了好多次，说把那个跨域的东西放到这个token的前面，也不知道他们怎么搞得，也不懂他们的代码。

 

四、老花眼

有接口文档总是对错名字，搞半天还要后台那里给我找问题，有一个接口他们那里字母写错了，我这里搞好久不知道哪里错了，两个人找半天，还有就是我写错了。

 

五、post请求数据格式

用jquery的ajsx和 axios的请求有一点不一样，他们请求数据是不一样的。用jquery请求的话好像就是 form-data的，用axios就是json格式，后台那里识别不了json格式的。这个东西也搞了近一天当时。。我也真的是有点难受。要仔细好好看请求头信息。

要仔细看好这两种是不一样的。

 

六、上传图片文件

说真的，之前工作中做的东西上传图片这个东西用的最多的还是微信自带的那个上传图片，拿到那个文件信息直接上传就好了，在浏览器里面之前上传过一次是上传的 base64 位的转码转成图片了。这一次后台又是在postman里面测试的，当时也不知道怎么去写，好在知道了  formdata 这个对象可以模拟form表单发送数据。

 

七、vuex

在项目开始的时候都应该先看看要不要用这个东西，由于要缓存数据，在后期的时候又加上这个东西，我们三个人只有我用了，他们也有好多跨页面的数据要保存，后面只有我自己用了一点这个。如果一开始就规定好这个就好一些了。

 

八、axios的options请求

 我以为只有axios有那个options请求来检测是否跨域。原来这个东西是 cors 规范规定的，引用一下阮一峰大佬的话。

 跨域资源共享 cors 详解     点击链接进入

 

浏览器将cors请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：

• head
• get
• post

（2）http的头信息不超出以下几种字段：

• accept
• accept-language
• content-language
• last-event-id
• content-type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不一样的。

 

 

九、request header filed authorization is not allowed by access-control-allow-headers in pregglight response

 

本来这个错误没有什么打大不了的，真的是倒霉。肯定不是前端的问题，这个也是我这里想要重点讲一下的东西。坑死人。

1 res.header("access-control-allow-origin", "*");
2 res.header("access-control-allow-headers", "content-type,content-length, authorization, accept,x-requested-with");
3 res.header("access-control-allow-methods","put,post,get,delete,options");

之前那个 access-control-allow-origin : * 这里的*可以代表允许所有的origin访问。

我说让后台那里加上  access-control-allow-headers： authorization 这个东西应该就可以了，他加了一个 * ，也就是下面的类似的这样

说这个*可以代表所有的东西，找了快一天的原因了，后来又让他加上了另外一个响应头。

理所当然的都是不行的，后来终于找到了官网上面的文档。终于找到错误的原因了。

可以看到响应头那里是一个 * 

我相信只要是我们项目成员的人看到这个截图绝对会终身难忘，肯定会想起我了，真的把人卡死了要。

除了那个 允许所有的域可以用 * 来表示，其他的都不可以，都必须要一个一个写出来，后台改了之后这个token终于加上去了。

其他还有一些粗心的小问题,也就想起来这么多。

 

本来这篇文章想着重写一下最后一个问题的心路历程的，但是写着写着写跑偏了，我们的人都挺有耐心的，也总算开发完了，把项目成果的一个二维码截图放到这里，也不知道以后可以不可以访问到。

还好我们团队有一个厉害的人，能坚持住，后台开发的同事也很好，接口调整的也非常及时，只要好好沟通，不要急眼，肯定会成功上线的。

2019.4.9日 20:31 记

微信扫二维码打开项目测试实例。