HTTP 头字段 Origin、Host 和 Referer 有什么区别?

简介: HTTP 请求头字段中的 Origin、Host 和 Referer 非常相似,乍一看都是域名相关的值,非常容易弄混。我在面试中也被问过,因为没准备好而哑口无言。今天西瓜哥我来带领大家学习这三个头字段,务必学完后能好好分清楚它们。

大家好,我是前端西瓜哥。

HTTP 请求头字段中的 Origin、Host 和 Referer 非常相似,乍一看都是域名相关的值,非常容易弄混。我在面试中也被问过,因为没准备好而哑口无言。

今天西瓜哥我来带领大家学习这三个头字段,务必学完后能好好分清楚它们。

Origin

Origin 由三部分组成:

  1. scheme:协议,如 httphttps
  2. host:域名或 IP 地址。如 127.0.0.1juejin.cn
  3. port:端口,可选。如果省略,默认为当前协议的默认端口(如 HTTP 的 80、HTTPS 的 443)

这些内容会从请求 url 中提取,其他的部分会被丢弃掉。

此外,Origin 的值也可能为 null。

# 示例
Origin: http://a.com:8080
Origin: http://b.com
Origin: https://juejin.cn
Origin: null

Origin 会在跨域请求时带上,服务端据此判断是否允许跨域,是 CORS 机制的重要一环。

如何通过 CORS 让一个请求能够正常跨域比较复杂,可以看我写的这一篇文章:《浏览器跨域请求的机制:CORS》

在非 GET 和 HEAD 方法的同源请求中,浏览器也会加上 Origin。西瓜哥对此不太理解,为什么同源也要加 Origin。我觉得对于同源请求,要么都别加 Origin,要么就全都加上。

Host

Host 由两部分组成:

  1. host:域名或 IP 地址
  2. port:端口,可选项。
# 示例
Host: a.com:5500
Host: a.com

在 HTTPS 下,你在浏览器的开发者工具可能会看到这个玩意::authority。这是 HTTP2 协议中定义的伪头字段,向后兼容 HTTP1,对应 Host。

Host 可以用于代理,当多个域名指向同一个 IP 时,Web Server 可以通过 Host 来识别并提供不同的服务。

如下面的 Nginx 配置就是将 blog.fstars.wangstatic.fstars.wang 做了代理,虽然都指向同一台机器,但可以根据 Host 提供两套独立的服务。

server {
    # 博客页面
    server_name  blog.fstars.wang;
    location / {
        proxy_pass   http://localhost:3000;
    }
}
server {
    # 图片等资源
    server_name  static.fstars.wang;
    location / {
        root   /www/static/;
    }
}

Referer

当前请求的来源页面。

值为 来源页面 url 移除掉 fragment 和 userinfo 后的结果

fragment 就是锚点,比如 https://blog.fstars.wang/posts/what-is-bezier-curve-and-draw-by-canvas/#chapter1#chapter1 ,它表示打开页面后,滚轮定位到的位置。

userinfo 则是用户的信息,如  https://username:password@example.com/foo/bar/ 中的 username:password

fragment 代表的页面滚动位置比较多余,userinfo 则是敏感信息,故而会被丢弃。

下面看看不同情况下会怎么携带 Referer

从页面 https://nginx.org/ 跳转到 https://nginx.org/2021.html 的时候,请求页面 url 时,就会带上

Referer: https://nginx.org/

对于页面中的图片来说,则带上当前页面的 url。

所以可以用来做图片防盗链,当 Referer 不在白名单中,就返回 403,或返回一个比较小的 “你盗我的图了” 的图片,或重定向到不要自己钱的公域图片上。

结尾

简单总结一下:

  • Origin:协议+域名+端口,主要用于跨域。
  • Host:域名+端口,HTTP2 对应字段为 :authority,主要用于服务器区分服务。
  • Referer:去掉 fragment(锚点)和 userinfo(用户信息)的 url,用于确认请求的来源页面。

我是前端西瓜哥,一名喜欢分享的前端开发,最近在学些 HTTP 知识,欢迎关注我。


相关文章
|
14天前
HTTP协议中请求方式GET 与 POST 什么区别 ?
GET和POST的主要区别在于参数传递方式、安全性和应用场景。GET通过URL传递参数,长度受限且安全性较低,适合获取数据;而POST通过请求体传递参数,安全性更高,适合提交数据。
191 2
|
4月前
|
缓存 搜索推荐 CDN
HTTP缓存策略的区别和解决的问题
总的来说,HTTP缓存策略是一种权衡,需要根据具体的应用场景和需求来选择合适的策略。理解和掌握这些策略,可以帮助我们更好地优化网页性能,提高用户的浏览体验。
118 11
|
11月前
|
缓存 安全 网络协议
HTTP和HTTPS的区别有哪些?
本文简要总结了 HTTP 和 HTTPS 的区别,从概念、端口、连接方式、使用场景、安全性等多个角度进行了对比。HTTP 是无状态的、无连接的应用层协议,适用于一般性网站和性能要求较高的应用;HTTPS 则通过 SSL/TLS 层提供加密、认证和完整性保护,适用于涉及敏感信息和高安全性的场景。文章还讨论了两者在性能上的差异,包括握手和加密开销、缓存效果以及 HTTP/2 的多路复用技术。最终,根据具体需求选择合适的协议能够更好地平衡安全性和性能。
3733 2
HTTP和HTTPS的区别有哪些?
|
5月前
|
安全 网络安全 数据安全/隐私保护
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
263 3
|
6月前
|
数据采集 缓存 负载均衡
动态HTTP代理与静态HTTP代理的区别及HTTP代理的常见用途与类型
HTTP代理在网络通信中扮演重要角色,优化数据传输并提供隐私保护和访问控制。本文对比动态与静态HTTP代理,探讨其特点、优劣势及适用场景。静态代理地址固定,适合稳定环境;动态代理灵活切换服务器,增强隐私保护。此外,介绍HTTP代理的常见用途(如缓存加速、匿名浏览、绕过限制等)及类型(透明、普匿、匿名、高匿、正向、反向代理),帮助用户根据需求选择合适的代理方式。最后提醒用户遵守法律法规,确保安全使用。
200 1
|
8月前
|
安全 搜索推荐 网络安全
HTTPS与HTTP:区别及安全性对比
HTTP和HTTPS是现代网络通信中的两种重要协议。HTTP为明文传输,简单但不安全;HTTPS基于HTTP并通过SSL/TLS加密,确保数据安全性和完整性,防止劫持和篡改。HTTPS还提供身份验证,保护用户隐私并防止中间人攻击。尽管HTTPS有额外的性能开销和配置成本,但在涉及敏感信息的场景中,如在线支付和用户登录,其安全性优势至关重要。搜索引擎也更青睐HTTPS网站,有助于提升SEO排名。综上,HTTPS已成为大多数网站的必然选择,以保障用户数据安全和合规性。
538 1
|
9月前
|
安全 算法 网络安全
HTTP和HTTPS的区别
本文介绍HTTP与HTTPS的区别、HTTPS链接建立过程及常见加密算法。HTTP为明文传输,易被窃听;HTTPS通过SSL/TLS协议加密,确保数据安全。HTTPS使用端口443,提供认证机制。文中还详细讲解了对称加密(如AES、DES)和非对称加密(如RSA、ECC)算法的特点及应用场景。
|
11月前
|
存储 Java 程序员
【HTTP】请求“报头”,Referer 和 Cookie
【HTTP】请求“报头”,Referer 和 Cookie
183 1
【HTTP】请求“报头”,Referer 和 Cookie
|
10月前
|
传感器 缓存 网络协议
CoAP 协议与 HTTP 协议的区别
CoAP(Constrained Application Protocol)协议是为资源受限的设备设计的轻量级协议,适用于物联网场景。相比HTTP,CoAP具有低功耗、低带宽占用和简单易实现的特点,支持多播通信和无连接的交互模式。
|
9月前
|
安全 网络安全 数据安全/隐私保护
第六问:http和https区别与联系
HTTP 和 HTTPS 是现代网络通信中的两种重要协议。HTTP 是明文传输协议,无加密功能;HTTPS 在 HTTP 基础上加入 SSL/TLS 加密层,提供数据加密、身份验证和数据完整性保障。HTTP 适用于非敏感信息传输,如新闻网站;HTTPS 适用于在线支付、账户登录等需要保护用户数据的场景。
260 0