HTTP头字段OriginHost和Referer有什么区别

　　大家好，我是前端西瓜哥。
　　HTTP请求头字段中的Origin、Host和Referer非常相似，乍一看都是域名相关的值，非常容易弄混。我在面试中也被问过，因为没准备好而哑口无言。
　　今天西瓜哥我来带领大家学习这三个头字段，务必学完后能好好分清楚它们。Origin
　　Origin由三部分组成：scheme：协议，如http、https。host：域名或IP地址。如127。0。0。1、juejin。cn。port：端口，可选。如果省略，默认为当前协议的默认端口（如HTTP的80、HTTPS的443）
　　这些内容会从请求url中提取，其他的部分会被丢弃掉。
　　此外，Origin的值也可能为null。示例Origin：http：a。com：8080Origin：http：b。comOrigin：https：juejin。cnOrigin：null
　　Origin会在跨域请求时带上，服务端据此判断是否允许跨域，是CORS机制的重要一环。
　　如何通过CORS让一个请求能够正常跨域比较复杂，可以看我写的这一篇文章：《浏览器跨域请求的机制：CORS》
　　在非GET和HEAD方法的同源请求中，浏览器也会加上Origin。西瓜哥对此不太理解，为什么同源也要加Origin。我觉得对于同源请求，要么都别加Origin，要么就全都加上。Host
　　Host由两部分组成：host：域名或IP地址port：端口，可选项。示例Host：a。com：5500Host：a。com
　　在HTTPS下，你在浏览器的开发者工具可能会看到这个玩意：：authority。这是HTTP2协议中定义的伪头字段，向后兼容HTTP1，对应Host。
　　Host可以用于代理，当多个域名指向同一个IP时，WebServer可以通过Host来识别并提供不同的服务。
　　如下面的Nginx配置就是将blog。fstars。wang和static。fstars。wang做了代理，虽然都指向同一台机器，但可以根据Host提供两套独立的服务。server｛博客页面servernameblog。fstars。location｛proxypasshttp：localhost：3000；｝｝server｛图片等资源servernamestatic。fstars。location｛｝｝Referer
　　当前请求的来源页面。
　　值为来源页面url移除掉fragment和userinfo后的结果。
　　fragment就是锚点，比如https：blog。fstars。wangpostswhatisbeziercurveanddrawbycanvaschapter1的chapter1，它表示打开页面后，滚轮定位到的位置。
　　userinfo则是用户的信息，如https：username：passwordexample。comfoobar中的username：password。
　　fragment代表的页面滚动位置比较多余，userinfo则是敏感信息，故而会被丢弃。
　　下面看看不同情况下会怎么携带Referer
　　从页面https：nginx。org跳转到https：nginx。org2021。html的时候，请求页面url时，就会带上Referer：https：nginx。org
　　对于页面中的图片来说，则带上当前页面的url。
　　所以可以用来做图片防盗链，当Referer不在白名单中，就返回403，或返回一个比较小的你盗我的图了的图片，或重定向到不要自己钱的公域图片上。结尾
　　简单总结一下：Origin：协议域名端口，主要用于跨域。Host：域名端口，HTTP2对应字段为：authority，主要用于服务器区分服务。Referer：去掉fragment（锚点）和userinfo（用户信息）的url，用于确认请求的来源页面。
　　我是前端西瓜哥，一名喜欢分享的前端开发，最近在学习HTTP知识，欢迎关注我。