前后端分离后,后端应该知道的一些基本前端知识

时间: 2018-05-30阅读: 449标签: 前端

写下此文,是因为本人作为前端小白,经常遇到同样小白的后端,常常不得不三番五次科普一些前端的基础知识,特此做些总结,也方便有下次的话,直接拿出来给对方看。


1. 什么是ajax

        对于网络请求分类的维度有很多种,有一种就是这个请求发送出去是否需要刷新页面。比如form表单,比如直接从浏览器地址栏输入地址请求,这样的请求都是伴随着页面刷新的。而ajax,全称异步js和xml,简单来说,就是前端向后端发送请求,无需刷新页面,这在注重用户体验的前端领域,是极为宝贵的。不过有利就有弊,ajax很方便,但也有很多限制。

        对于ajax,后端并不需要了解多么深入,只需要知道有这么一回事,同时清楚,现在前后端交互,尤其是在前后端分离的情况下,ajax是使用最普遍的。


2. 跨域

      ajax有很多限制,在前后端分离之后,首当其中的就是跨域问题。在以前的诸如SSH框架下搭建的项目,因为前后端都在一起,是较少见跨域这种情况的,因此对于跨域的不了解,是后端小白们比较常见的问题。

      一个网络请求,url格式通常是:protocol://ip:port 。所谓跨域,就是当前页面的访问地址(也就是显示在浏览器地址栏里的url)和ajax请求的后端地址在protocol,ip,port三项中至少有一项不一样。

     如果出现了跨域ajax请求,因为浏览器的同源策略限制,如果不做任何处理,那么请求是不能成功的。对于跨域访问的解决方案有很多,比如jsonp,代理等方式,不过常用的还是CORS。

     使用CORS方案,后端要做的就是在请求响应头里添加'Access-Control-Allow-Origin'头,其值表示允许访问的源地址。常用的策略是获取request里的origin值,然后验证白名单(或黑名单),通过则将origin值赋给'Access-Control-Allow-Origin'响应头。测试的话,也可以设为*,表示允许来自任何源的跨域请求。


3. OPTIONS请求

      OPTIONS请求即预检请求,当一个请求不是简单请求时,浏览器会先发送一个预检请求,来确认是否能够请求成功,当能请求成功后,才会发送“真正”的请求。

      当使用跨域ajax的时候,因为会设置各种请求头信息,这样的请求就不是简单请求,这时就会出现预检请求的情况,在后端看来就会发现明明前端只请求了一次,却收到两次请求的情况,如果处理不当,就会出错。PS:有些框架可能会默认处理OPTIONS请求。


4.重定向

      在那个后端兼职的前端的古老年代,很多逻辑都是后端帮前端来做的,因此常常一言不合就302重定向。

      现在,后端同学们,你们必须知道一点,不要试图操作前端了,你们唯一能做的就是告诉前端,你们想要做什么,至于帮不帮你做,得由我们前端说了算。

      当然,这么说并不是我们前端傲娇,而是ajax是不允许302重定向的。这个问题比较常见的是一些老项目,要采用前后端进行重构,后端则还是原来那一套,这时就会出现各种返回302的情况。

      比如本人就遇到多次这样的问题。我们公司的登录认证是采用sso形式的,很多老项目都是当请求来时,验证cookie,不通过,直接上302跳SSO服务。而这样的代码一般都是通用的,我们的小白后端或者是直接继承了前辈的项目,或者是复制的以前的项目代码而不知这个隐蔽的情况。当我试图请求不成功,发现302后,我跟他说不能重定向,他一脸懵逼的摇头,我没重定向啊(有的还会问什么是重定向,这种情况我只能甩他一个百度百科)。直到我看到响应头里的Location包含着sso等字样,我不得不长叹一口气,告诉他认证那块呢,同志!


转载地址:https://blog.csdn.net/u014445339/article/details/74301489  

合格的前端不少,优秀的不多

同样的前端工作,有人的工作输出确实是更加的优秀。人与人之间,真的有很大的差别。 今天,我们就来聊一下身边的优秀的前端,是怎样对待前端这份工作的?总结了几点

谈前端框架的『御剑之道』

重视『特性』,而不是语法与API,如果想达到登峰造极的境界,就不要过于专注手里的剑。框架既是神兵利器,也是枷锁。既赋予我们力量,也束缚着我们。若想挣脱这个枷锁,就要达到手中无剑,心中有剑的境界

前端工程化的浅析

前端工程化的本质是将可以用工具来完成的事情用工具来完成。前端工程化在目前的开发中是不可逆的趋势,每一个身处工作岗位的前端,都应该确立前端工程化的开发思维和开发方法

纯JS实现前端动态分页码

思路分析:有3种情况。第一种情况,当前页面curPage < 4;第二种情况,当前页面curPage == 4;第三种情况,当前页面curPage>4。此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示...

多种认证、授权模型的比较

本文主要列举在如今前后端分离、手机App大行其道的现状下,用户认证、授权的几种做法及对比。本文假设你已经理解了各种认证模式的具体细节。

web前端js中ES6的规范写法

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

作为一个前端,可以如何机智地弄坏一台电脑?

有人说,前端的界限就在浏览器那儿。无论你触发了多少bug,最多导致浏览器崩溃,对系统影响不到哪去。想象一下,有天你在家里上网,吃着火锅还唱着歌,点开一个链接,电脑突然就蓝屏了!

前端工程师/程序员简历怎么写?

其实前端工程师并不少,但很多时候合适的前端工程师难找。可能是由于程序员比较内向,前端工程师都没有把自己最厉害的那一面表现出来。今天我们来聊聊前端工程师的简历怎么写,希望能够对大家有帮助。

实施微前端的六种方式

微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是,这些前端应用可以独立运行、独立开发、独立部署。

Web前端工程师必备的PS技能之切图

Web前端工程师必备的PS技能之切图:PS中我的标尺的参考线为什么不能自动吸附图层或画布中间了?有个选项没有选择“菜单栏-视图-对齐”,按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片为“切图”