做营销型网站 公司,免费网页游戏在线玩,php网站开发环境搭建,云服务器 可以做网站吗文章目录 font color red1.何为前后端对接?2.对接中关于http的关键点2.1. 请求方法2.2. 请求参数设置简解#xff1a; 3.对接中的跨域(CROS)问题**为什么后端处理跨域尽量在业务之前进行#xff1f;**3.总结 1.何为前后端对接? “前后端对接” 是指前端和后端两个… 文章目录 font color red1.何为前后端对接?2.对接中关于http的关键点2.1. 请求方法2.2. 请求参数设置简解 3.对接中的跨域(CROS)问题**为什么后端处理跨域尽量在业务之前进行**3.总结 1.何为前后端对接? “前后端对接” 是指前端和后端两个不同的软件组件或系统之间的协作和交互过程。在软件开发中通常将应用程序划分为前端和后端两个主要部分它们各自负责不同的任务和功能 前端前端是用户与应用程序直接交互的部分通常包括用户界面UI和用户体验UX。前端通常运行在用户的设备上例如Web浏览器、移动应用程序或桌面应用程序。前端的主要任务包括呈现数据、收集用户输入、处理用户交互以及向用户展示信息。前端通常使用HTML、CSS和JavaScript等技术来创建用户界面。 后端后端是应用程序的服务器端组件它负责处理前端发送的请求并执行相应的操作。后端通常包括数据库、服务器、业务逻辑和应用程序的核心功能。它处理数据存储、验证、安全性、性能和业务规则等方面的问题。 “前后端对接” 涉及将前端和后端协调工作以实现应用程序的完整功能。这包括通过API应用程序编程接口或其他通信方式进行数据交换、数据验证、身份验证和授权以及确保前端和后端的数据和状态同步。 通常情况下前后端之间的交互是通过HTTP协议进行的。HTTPHypertext Transfer Protocol是一种用于在客户端和服务器之间传输数据的协议广泛用于Web应用程序中。通过HTTP前端可以向后端发起请求并接收来自后端的响应。
2.对接中关于http的关键点
前端需要经常请求的信息就是http请求
请求消息HTTP Request Message 请求行Request Line包括请求方法GET、POST、PUTDELETE等、请求的资源路径URL和协议版本HTTP/1.1等。 请求头部Request Headers包含关于请求的元信息如User-Agent用户代理、Host主机、Content-Type内容类型等。 空行Empty Line请求头部与消息主体之间需要有一个空行。 消息主体Message Body可选的包含发送到服务器的数据通常在POST请求中使用例如表单数据或JSON数据。
前端中我们需要经常对请求头请求体以及请求方式进行修改处理最后发送到后端接口处
2.1. 请求方法
get请求一般数据参数仅包含query参数
axios.get(/user, {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}).then(function () {// 总是会执行});
post请求和get相比可以携带请求体。一般表示提交
//在axios中默认的请求数据时json
axios.post(/user, {firstName: Fred,lastName: Flintstone}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});put请求用法和post类似一般表示修改。delete请求用法和post类似一般表示删除。
2.2. 请求参数设置简解
实际上除了get和query参数几乎算绑定关系之外其他三种类型请求可以自定义请求参数。 query参数只在get请求中使用具体实现拼接到url中一般不需要额外的请求设置。 在get请求中参数一般通过拼接url时间如果是几个参数的时候可以增加符号 如
localhost:8080/api/test?nameadminpasswordadmin而在springboot中可以 GetMapping(/test)public String test(String name){log.info(测试接口被访问);return name;}这要保证变量名和前端传递的变量名一致这样springboot可以帮你自动映射到你的变量里。
body参数 json参数是axios默认发送的类型如果使用axios不需要任何额外的设置直接传递参数即可。
请求头需要添加Content-Type: application/json
//json的结构
{name adminpassword admin
}由于json实际上是一个字符串所以只能映射到一个变量里如果前端结构变量和后端一直可以通过RequestBody解析到对象里。 URLSearchParams 参数 URLSearchParams参数是n对键值对的形式和query差不多但是是在body中可以说是query的post翻版请求头需要application/x-www-form-urlencoded
export const createFolder (newPath : string) {const prams new URLSearchParams();prams.append(newPath,newPath);return serviceany, ApiResponse({ url: baseURL /createFolder,method: post,data: prams,headers: {Content-Type: application/x-www-form-urlencoded}})
}RequestParam(name)可以把前端变量注入到后端变量里防止变量名冲突 FormData参数 有没有发现上面都是传输简单字符串的那么这个就是传文件的FormData参数是类似键值对的形式但是可以传输文件
//调用接口
const formData new FormData();formData.append(file, file); // 这里可以根据需要设置其他表单字段formData.append(path,currentPath);uploadImg(formData).then((res) {if(res.statusCode 200){ElMessage.success(上传成功);flushTableData();refUpload.value.clearFiles();}//前端上传api
export const uploadImg (formData:FormData) {return serviceany, ApiResponse({ url: baseURL /uploadImg,method: post,data: formData,headers: {Content-Type: multipart/form-data}})
}3.对接中的跨域(CROS)问题
什么时候会发生跨域问题 跨域Cross-Origin是指在 Web 开发中当一个网页的源Origin与另一个网页的源不同即它们的协议HTTP/HTTPS、主机Domain或端口号不同时就会发生跨域问题 实际上概念大家都知道不过有时候跨域有时候不跨摸不着头脑。 跨域预请求Preflight Request是在跨域请求中的一种特殊情况它通常发生在满足以下条件的情况下 使用非简单请求方法跨域请求中如果使用了非简单请求方法例如PUT、DELETE、OPTIONS、PATCH等且请求包含了自定义的请求头非简单请求头那么浏览器会自动发起一个跨域预请求以获取服务器是否允许实际请求的权限。 非简单请求头跨域请求中如果请求中包含了自定义的请求头字段例如Authorization、X-Requested-With等而这些请求头字段不在浏览器的预定义白名单内也会触发跨域预请求。 跨域请求条件跨域预请求通常与跨域请求例如跨域AJAX请求相关。这意味着请求的源Origin、协议HTTP/HTTPS、端口号Port等与当前页面的源不同。 跨域预请求的主要目的是确保服务器允许跨域请求以避免潜在的安全风险。在跨域预请求中浏览器会自动发起一个OPTIONS请求这个OPTIONS请求包含了用于验证服务器是否支持跨域请求的信息例如请求方法和请求头字段。
那么如果是简单请求的话即便跨域也可能可以正常发送数据。
为什么后端处理跨域尽量在业务之前进行
我有一次在token验证拦截了正常的跨域请求我配置了跨域处理请问为什么无法正常使用接口 答因为我在过滤器处理的token拦截器处理的跨域。
那么答案显然易见跨域的option请求被token过滤器所拦截拦截器等于无效状态。
解决方案有两个
要么把跨域处理放到过滤器放到token过滤器之前把token处理放到拦截器放到跨域处理之后。
核心逻辑是 跨域数据属于http逻辑处理一般情况尽量在业务之前处理完毕。
3.总结
这篇文章我主要总结了前端参数请求头意义后端接受参数的注解以及跨域的流程如何处理跨域。
