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

anzhiruosu anzhiruosu     2022-11-22     299

关键词:

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

 

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等字样,我不得不长叹一口气,告诉他认证那块呢,同志!

 

结语

      讲道理,应该还有很多,只是今天暂时只遇到了这么些,以后想起了再补充吧。

      写完之后,发现有不少吐槽我们后端同学的地方,突然觉得背离了初衷,貌似不方便直接拿出来给他们看啊。

前后端分离与前后端不分离的区别

前后端不分离   在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。    这种应用模式比较适合... 查看详情

前后端分离

开发模式在Web开发模式中,有两种开发模式前后端不分离前后端分离前后端分离优势在前后端不分离模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合... 查看详情

前后端分离及不分离

前后端不分离  在前后端不分离的应用模式中,前端页面看到的效果是由后端控制,由后端渲染页面或重定向,后端需要控制前端的展示,前端与后端的耦合度很,这种应用模式比较适合纯网页应用,但是当后端对接APP时,APP... 查看详情

前后端分离与前后端不分离

前后端不分离  在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制的,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。  这种应用模式比较适合纯网页应用,但是当... 查看详情

关于前后端分离与不分离

 什么是前后端分离?  在前后端分离的应用模式中,后端只需要返回前端所需的数据,不用渲染HTML页面与效果。页面的展示与效果所需的数据,数据的加载方式,主要由前端决定。  核心思想是前端html页面通过ajax调用... 查看详情

//……关于前后端分离与不分离

什么是前后端分离?  在前后端分离的应用模式中,后端只需要返回前端所需的数据,不用渲染HTML页面与效果。页面的展示与效果所需的数据,数据的加载方式,主要由前端决定。  核心思想是前端html页面通过ajax调用后端... 查看详情

前后端分离与不分离

 前后端不分离    在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。     这种应用... 查看详情

怪咖------前后端分离与不分离的区别------

   前后端分离,首先所有的程序以数据为基础的,没有数据的程序没有实际意义,程序的本质就是对程序的增删改查,其实前后端分离就是把数据操作和显示分离出来。前端专注做数据显示,通过文字,图片或者图标等方... 查看详情

node前后端分离基本概括

首先从一个重要的概念“模板”说起。广义上来说,web中的模板就是填充数据后可以生成文件的页面。严格意义上来说,应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大致分为前端模板(如ejs)和后端... 查看详情

不懂前后端分离?这篇就够

参考技术A前后端分离前我们的开发协作模式一般是这样的:前端写好静态的HTML页面交付给后端开发。静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可。后端使用模板引擎去套模板,同时内嵌一些后端提供的模板... 查看详情

vue发布中的前后端分离和前后端不分离

前后端分离思路:前端和后台完全分离.前端提供静态的css和js,在运行时将css和js给后端,后端进行数据的请求(ajax)前后端分离就是前端和后台在不同的服务器上。基本是前端一个nginx加css和js后端nginx加index.html当用户访问的时候... 查看详情

微信小程序前后端分离怎么实现

微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开,前端负责展示和交互,后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤:1.前端代码开发:使用微信小程序开... 查看详情

你是如何看待前后端分离的?

首先看看前后端分离是什么?  “前端”通常指的是,相对来说更接近用户的一端,例如:APP,网页、桌面程序等,在现实开发中大部分情况可以理解为“客户端”;  “后端”相对来说就更泛化了,可以理解为是为前端提... 查看详情

5_前后端分离

前后端分离属于软件架构的一种。其核心思想是把前端项目(Node.js实现的)和后端项目独立部署到不同的服务器上,前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备... 查看详情

5_前后端分离

前后端分离属于软件架构的一种。其核心思想是把前端项目(Node.js实现的)和后端项目独立部署到不同的服务器上,前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备... 查看详情

我们为什么要尝试前后端分离(代码片段)

这不是一篇纯技术文章,而是一篇分享我个人在前后端分离路上收获的点点滴滴的文章,以此来为准备尝试前后端分离或者想了解前后端分离的童鞋做一个大体的讲解。 尝试与改变如果你没有尝试过前后端分离的工作流程,... 查看详情

浅谈前后端分离与不分离

前后端的分离与不分离  随着不同终端的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本,为了提升开发效率,前后端分离的需求越来越... 查看详情

关于前后端分离,你需要知道的那些事

...者是想要入门前端,并追随时代的潮流,想要做前后端分离的小伙伴们来说,这篇文章是为你们而写的。至于想多了解一些前后端分离的知识,可以参考https://www.kancloud.cn/chandler/web_technology/741853,该篇文章是... 查看详情