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

更新日期: 2018-05-30 阅读: 4.9k 标签: 前端

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


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  

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/841

相关推荐

前端和后端的区别_为什么很多人选择前端?

什么是前端什么是后端,前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,下面简单说一下:前端更容易入门,每天调整界面的展示,通过代码 完成优美的界面和酷炫的交互。后端入门稍困难,每天关注的是业务逻辑的处理,数据的增删改查,性能的优化

掘金前端课程(小册)推荐

大家好,本期内容给大家推荐一些优质的前端掘金课程,比较适合初学者及工作几年的前端小伙伴,里面的内容讲解的比较详细,作者也是一线的大厂工作者。有兴趣的小伙伴快来打卡看一下吧

什么是前端? web1.0、web2.0时代的网页制作,前端开发都有哪些内容等

前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境

前端开发,如何写出优秀js代码

前端开发如何写出优秀js代码,什么样的javascript代码才是最优秀的的呢?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明。

解读前端热更新原理

热更新:浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面。

前端权限控制

权限管理一般分以下 3 个基础概念:功能点,角色,用户。它们之间的关系一句话就能说清楚:一个用户可以拥有多个角色,而一个角色可以包含多个功能。

前端开发,你的优势是什么?

每个前端开发都要有自己的优势,总结一下我的优势:1、工作年限长、经验多;2、基础相对扎实;3、逻辑思维能力合格;4、业务需求分析能合格。

前端需要了解的后端知识

一名有前端工程师,除了掌握自身知识体系外,在业余时间也应该了解下后端的知识时间,由于前端与后端工作是最最密切相关的,多学习些后端知识对自身也是大有好处的。当然除了上述这些,计算机网络、数据结构和算法、计算机组成和原理、离散数学等知识都要涉及。

女生30 岁转行做前端开发,晚吗?

30岁转行做前端程序开发!请把“晚吗”去掉。50多岁大爷都学编程了。你还担心啥?先从年龄上来说,这个年龄进入IT职业,那是相当棒的黄金时间,有目标,有干劲,有新颖的思想,而且仍是女孩子。

前端常用的新手引导库,总有一款适合你!

在产品发布新版本或者有新功能上线时,经常需要新手引导功能来引导用户了解应用,下面就来分享几个开箱即用的新手引导组件工具库,帮你快速实现新手引导功能!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!