长链形成短链,短链URL 重定向访问原链接

1. 长链生成短链

  • 长链:是一个较长且包含复杂路径的 URL,例如一个网页地址、文件下载链接、或是带有多个参数的 URL。

  • 短链 :是一个较短的 URL,通常通过短链服务(如 Bitly、TinyURL、百度短链接等)生成,通常表现为:

    vbnet 复制代码
    https://short.ly/abc123

生成短链的过程主要通过短链服务的 数据库映射 来实现。短链服务会将长 URL 映射为一个短的标识符,并存储在其数据库中。这些短链通常是一个编码后的字符串。

  • 例如,长链:

    vbnet 复制代码
    https://example.com/this-is-a-long-url/with-many/parameters?name=value&other=value

    被映射到一个短链:

    vbnet 复制代码
    https://short.ly/abc123

这个短链就变成了一个唯一的标识符,指向原来的长 URL。

2. 短链重定向到长链

  • 当用户点击短链(例如 https://short.ly/abc123)时,短链服务会读取该短链标识符 abc123,然后查找数据库中与该标识符关联的原始 URL(即长链)。
  • 找到原 URL 后,短链服务通过 HTTP 重定向 将用户引导到原始 URL。

3. HTTP 重定向的工作原理

在前端(浏览器端),HTTP 重定向是通过设置 3xx 状态码 来完成的,常见的包括:

  • 301 Moved Permanently:表示资源被永久转移到新的位置。
  • 302 Found(临时重定向):表示资源被临时转移。
  • 303 See Other307 Temporary Redirect 也常用于重定向。

例如,短链服务会返回一个响应,像这样:

http 复制代码
HTTP/1.1 301 Moved Permanently
Location: https://example.com/this-is-a-long-url/with-many/parameters?name=value&other=value

浏览器收到这个响应后,会自动跳转到新的 URL,也就是原始长链的内容。

4. 短链服务如何工作

  1. 用户访问短链(例如 https://short.ly/abc123)。
  2. 短链服务查找数据库中与 abc123 对应的原 URL。
  3. 短链服务返回 301302 重定向 状态码,告诉浏览器跳转到原始 URL。
  4. 浏览器跳转到原 URL,最终加载页面内容。

5. 常见的短链生成服务

常见的短链服务(如 Bitly、TinyURL、百度短链接等)会为每个长链生成一个唯一的短 URL。生成短链的过程通常包括:

  • 通过哈希算法或其他方法生成短链的标识符(如 abc123)。
  • 将该标识符与原始 URL 存储在服务的数据库中。
  • 当用户访问短链时,短链服务从数据库中查找原 URL,并通过 HTTP 重定向将用户引导到原网址。
相关推荐
二川bro9 小时前
详细解析 cesiumViewer.render() 和 requestAnimationFrame(render)
前端
前端付豪9 小时前
必知Node应用性能提升及API test 接口测试
前端·react.js·node.js
王同学 学出来9 小时前
vue+nodejs项目在服务器实现docker部署
服务器·前端·vue.js·docker·node.js
一道雷9 小时前
让 Vant 弹出层适配 Uniapp Webview 返回键
前端·vue.js·前端框架
bug总结10 小时前
uniapp+动态设置顶部导航栏使用详解
java·前端·javascript
晴殇i10 小时前
深入理解MessageChannel:JS双向通信的高效解决方案
前端·javascript·程序员
毕设十刻10 小时前
基于Vue的民宿管理系统st4rf(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
kkkAloha10 小时前
倒计时 | setInterval
前端·javascript·vue.js
云轩奕鹤10 小时前
智析单词书 - AI 驱动的深度英语词汇学习平台
前端·ai·产品·思维
逆光如雪10 小时前
控制台快速查看自己的log,提高开发效率
前端