记一次先后端分离开发中遇到的各类坑

越学习越感受本身了解的少，学习的知识不够扎实，之前老是感受本身了解CORS，先后台交互遇到那个经典的错误信息脑海中就会想起须要后台设置 cors 错误和代码以下。

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

1 res.header("Access-Control-Allow-Origin", "*");

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

提及来从开始接触node到如今也有一年多的时间了，平时也是常常看文章，看书中的知识一直积累着知识。通常的后台的东西也是知道一些的，也能够作一作。

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

咱们是先后端分离开发，咱们在深圳，后台在云南。分离的也够完全了吧。

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

咱们和后台关系挺好的，每次的问题都是你们一块儿努力解决，虽然好多问题，可是仍是一条心，挺好的。

 

1、UI图 VS 业务

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

一周多的时间都是在企业微信群里面问数据接口好了吗？截图噼里啪啦的就怼上去几张。我仍是感受数据库的关系表要按照正常的来定义，可是返给前台的数据格式仍是让一些经验丰富的前端来定义好一些，由于此次他们根本都没有看UI图致使感受全部的接口都被从新写了一遍同样。并且那种格式也就是连表查询吧。须要什么加什么。

 

2、跨域问题

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

感受也就是这个不知道他们是否是没有作过相似的东西，跟他们说跨域，啊？我用PostMan能够访问的到啊。我访问你妹哦。大家怎么写的，而后截图Postman的截图，咱们写代码使用大家的测试工具写吗。

 

3、token的验证

由于咱们作了token验证，我不知道真正的是否是这样的，我以前作了两次都是咱们这样的。

我不知道那个发送过时（或者错误的）后台要返给咱们一个固定的状态表明这个token过时了这一步是否是必要的，我以前作的都是这样的，因此此次也让他们改了，他们以前都没有作发送过时token要怎么样的感受，并且这个token的接口和另外请求数据的接口在服务器的不一样的端口上面。

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

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

 

4、老花眼

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

 

5、post请求数据格式

用jQuery的ajax和 axios的请求有一点不同，他们请求数据是不同的。用jQuery请求的话默认的是application/x-www-form-urlencoded的（这里以前写错了，通过指正修改了），用axios就是json格式。咱们是用的axios，后台那里识别不了json格式的。这个东西也搞了近一天当时。。我也真的是有点难受。要仔细好好看请求头信息。

 

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

 

6、上传图片文件

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

 

7、vuex

在项目开始的时候都应该先看看要不要用这个东西，因为要缓存数据，在后期的时候又加上这个东西，咱们三我的只有我用了，他们也有好多跨页面的数据要保存，后面只有我本身用了一点这个。若是一开始就规定好这个就好一些了。

 

8、axios的options请求

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

 跨域资源共享 CORS 详解   http://www.ruanyifeng.com/blog/2016/04/cors.html  点击连接进入

 

浏览器将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

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

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

 

 

9、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 记

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

 

附加：评论中大哥的指导, 感谢了 @Adming   https://www.cnblogs.com/weapon/

这些全部的“坑”都是你对HTTP协议不了解，不熟悉形成的。
不少人不重视基础，对HTTP协议只了解一些皮毛，整天都在折腾各类高大上的框架，张口闭口谈的也是各类听不懂的名词，仿佛讨论HTTP协议就很low同样。
但你可知道，大家讨论的这些各类框架、各类名词都终都只是HTTP协议不一样实现方式而已，asp、jsp、php、asp.net(asp.net core) 、nodejs、app、小程序、公众号、服务号这些耳熟能详框架（或名词）那个不是创建在HTTP之上的（或能离开HTTP协议）。
能够这样说，作Web开发不深刻理解HTTP协议的人在这个行业的前途有限。
也不是说就必定干不了这行了，我见过不少挂着“高级”头衔的前端或后端开发对HTTP协议的了解也仅限于知道GET、POST、200、40四、500而已，也能工做，看起来干得还不错，但和他们交流起来真的打人的冲动都有。
例如：我写好一个api接口给他，他说调不通，返回404，我说我那个api接口只接受json格式的数据，他说我是传的json格式啊，我说必需要在HTTP请求头加入Content-Type:application/json，他说不会，还说我要求多，又说请求是组件封装好了的，无法加，老子随手百度一下他用的那个组件的用法而后写个示例给他就或以了（我很确定一个成熟的前端HTTP组件不可能弱智到连设置经常使用的HTTP头都不行）。
反之，你理解了HTTP协议就是找到了Web开发的捷径，一个一通百通的阀门，深刻了解HTTP协议对Web开发中遇到的不少问题跟本不是问题，就算有问题也能够很天然的迎刃而解，像做者文章中那些问题，在你深刻了解HTTP协议后我相信你本身都会嘲笑本身，人穷怪屋基,没米吃怪筲箕,

-------------

别之后了，如今就能够看，百度一下HTTP协议中文版，内容又很少，抓重点理解就能够了（后面最好买一本HTTP权威指南之类的书系统学习一下）。其实HTTP协议就那点东西，抓重点理解就行。1.HTTP协议三个最重要的特性：无状态、短链接、单向(只能客户端请求，服务端在接到请求后处理后返回，不能由服务器端向客户端推数据)。2.经常使用的请求方式，get、post、put、delete，并了解get和post的区别。常见的HTTP状态码，200、400、500、40四、403等等。3.无论是请求仍是返回老是包含header和body两部分，又称请求头、请求内容，返回头，返回内容。header是键值对，绝大多数状况下都是HTTP协议定义好或推荐的用法，只有在极少数的状况下须要自定义。body的格式通常和header指定的Content-Type值一致。4.关于Content-Type，它的做用是告诉接收方用什么方式来解析对应的body数据，不少时候能够省略，但你必定要知道有这个东西。好比：请求头Content-Type经常使用值有：application/x-www-form-urlencoded(表单提交)、multipart/form-data（文件上传）、text/plain（纯文本）、application/json。返回经常使用的有：text/plain、text/xml、text/html等等（完整的Content-Type列表自行百度，只须要记一些经常使用的就行）。为何JQuery和axios的默认Content-Type不同呢？由于，JQuery流行的时候尚未大规模的应用先后端分离，全部默认仍是传统的表单提交方式（Content-Type值是application/x-www-form-urlencoded不是你说的Form-Data），而axios天生就是为先后端分离而生的，全部默认Content-Type值就是application/json。我强调这一点的缘由就是想说，这个默认在HTTP协议中并无强制规范，都是各个浏览器，Web服务器或HTTP组件自行定义的。也许你有疑问，我经过抓包发现好像请求头或返回头并无Content-Type样，那是由于大多数Web服务器或浏览器均可以本身根据内容推断出格式。5.一些其余经常使用的http header 键/值的做用。6.POST Content-Type:Multipart/form-data 有一些特殊，它是在早先的HTTP请求中没有定义，后来专门添加的用来文件上传的，详见RFC1867。7.也就这些了