首页 > 其他分享 >前端开发时,什么时候url需要使用encodeURIComponent?

前端开发时,什么时候url需要使用encodeURIComponent?

时间:2024-02-07 11:12:09浏览次数:26  
标签:编码 search url URL let encodeURIComponent 前端开发

在前端开发时,当需要将用户输入或者动态生成的字符串作为URL的一部分(特别是查询参数或路径片段)发送到服务器时,应当使用 encodeURIComponent 函数对字符串进行编码。
以下是一些具体场景:

  1. 查询参数
    当你在URL中添加查询参数(query parameters),例如通过 ?key=value 的形式附加到URL末尾时,每个键值对的“键”和“值”都需要被正确编码。
    这是因为查询参数可能包含特殊字符,如空格、引号、#、% 等,如果不编码,这些字符可能会导致URL解析错误或者引起安全问题。

    let search = 'search term with spaces';
    let url = `/search?query=${encodeURIComponent(search)}`;
    
  2. 路径片段(Path segments)
    在构建动态路由地址时,如果路径部分由用户输入或其他动态内容决定,也需要对这部分内容进行编码。因为URL路径中的某些字符如 /?# 以及一些保留字符如果不编码,可能导致路由匹配失败或被误解为其他类型的URL组成部分。

    let folderName = 'my folder';
    let url = `/folder/${encodeURIComponent(folderName)}`;
    
  3. 表单提交(FormData)
    虽然在创建表单数据对象(FormData)时,通常不需要手动调用 encodeURIComponent,因为浏览器会在发送请求时自动处理,但在某些情况下,比如直接拼接URL并以GET方式提交时,仍需确保参数编码。

总的来说,在任何你将用户输入或非固定文本合并到URL中的地方,都应该考虑使用 encodeURIComponent 来确保URL的有效性和安全性。

标签:编码,search,url,URL,let,encodeURIComponent,前端开发
From: https://www.cnblogs.com/longmo666/p/18010745

相关文章

  • 一个进入容器后curl的不对的问题诊断
    一个容器,进入容器的时候是否开启gpu,会导致curl的行为不一致。具体表现为容器开启--gpusall后进入容器,执行curl会出现“curl:symbollookuperror:curl:undefinedsymbol:curl_mime_free”错误诊断中,我先比对了两个--version是否一致。开启前和开启后的版本信息......
  • form-data、x-www-form-urlencoded的区别
    我们在平时的postman请求调试,以及web的http请求开发时,常常能看到以下几种传参的形式form-data、x-www-form-urlencoded、raw、binary,那么这些请求方式的区别是什么呢?1)form-data就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔......
  • 如何在 JavaScript 中验证 URL
    如何在JavaScript中验证URL统一资源定位符URL(UniformResourceLocator)引导你进入互联网上的一个页面或文件。URL是互联网上事物的地址。所有有效的URL都遵循某些模式。因此,如果你知道这些模式,你就可以在你的程序中确定一个URL是否有效,并给出反馈、抛出一个错误,等等。......
  • npm disturl 是做什么用的?
    npmdisturl是做什么用的?npmdisturl是一个配置项,用于设置npm下载tarball包(通常是Node.js的二进制文件或者一些带有平台相关编译内容的npm模块)时的基础URL。当npm需要从源代码构建依赖项,并且这些依赖项包含需要从特定位置下载的预编译二进制文件时,它会使用这个disturl来定位和......
  • Java调用ChatGPT(基于SpringBoot和Vue)实现连续对话、流式输出和自定义baseUrl
     源码及更详细的介绍说明参见Git上的README.md文档https://github.com/asleepyfish/chatgpt本文Demo(SpringBoot和Main方法Demo均包括)的Git地址:https://github.com/asleepyfish/chatgpt-demo流式输出结合Vue前端的Demo的Git地址:https://github.com/asleepyfish/chatg......
  • FFmpeg和Monibuka拉取rtsp(大华摄像头)视频流时未进行URLCode编码导致提示404等报错
    场景Monibucav4(开源流媒体服务器)在Windows上搭建rtmp服务器并实现拉取rtsp视频流以及转换flv播放:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/132474126Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/articl......
  • Curl文件上传命令
     Curl文件上传命令参考:Curl命令上传文件详解http://www.mobiletrain.org/about/BBS/254455.htmlcurl是一种用来传输请求命令工具,可以通过命令行方式上传和下载文件。 一、Curl命令上传文件夹Curl可以上传单个文件,还可以在上传时指定文件夹。以下是上传文件夹的curl......
  • Windows URL Scheme 命令行唤起软件指定界面 网页链接点击出现发邮件客户端
    前言全局说明Windows命令行唤起软件指定界面网页链接点击出现发邮件客户端网页链接里发邮件,点击后弹出系统邮件客户端,这是Win提供的一种叫URLScheme一、直接向某人发送邮件mailto:[email protected].在网页里调用,写成<ahref="mailto:[email protected]">发邮件给管理......
  • 前端开发时,点击重置按钮,列表会回到第一页查询呢,还是查询当前页,只是把输入框的条件清空
    点击重置按钮时,列表的行为取决于具体的应用需求和设计。通常有以下两种常见情况:回到第一页并清空查询条件:当用户点击重置按钮后,应用会清除所有输入框中的查询条件,并将列表刷新回第一页的数据(通常是默认排序或无条件查询的结果)。这种设计在用户想要从头开始检索数据或者需要查看......
  • urllib
    importurllib.requestimporturllib.parse#请求地址url='http://www.baidu.com'url_img_video=''#影音文件headers={'User-Agent':'Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chr......