Origin & Referer
Origin Header 示例
Origin
请求头部是一个 HTTP 头部,它提供了发起请求的网页的源(协议、域名和端口)信息。它通常在进行跨域资源共享(CORS)请求时使用,以便服务器可以决定是否接受请求。
假设我们在浏览器的地址栏输入并访问 http://www.example.com
,这个网站上有一个 AJAX 请求,该请求需要从 https://api.example.com/data
获取数据。当这个 AJAX 请求被发出时,浏览器会自动添加一个 Origin
头部到这个请求中,如下所示:
Origin: http://www.example.com
服务器 https://api.example.com
会检查这个 Origin
头部,根据设置的 CORS 策略来决定是否允许这个请求。如果 CORS 策略允许来自 http://www.example.com
的请求,服务器将响应数据并在响应头部中包含适当的 Access-Control-Allow-Origin
头部。
Referer Header 示例
Referer
请求头部是一个 HTTP 头部,它标识了发起 HTTP 请求的网页的 URI。它用于告知服务器请求是从哪个页面发起的,通常用于日志记录、分析流量来源以及防止 CSRF 攻击等。
假设我们正在浏览 http://www.example.com/index.html
页面,这个页面上有一个链接指向 http://www.othersite.com/info.html
。当点击这个链接时,浏览器会发起一个请求到 http://www.othersite.com/info.html
,并且在这个请求中包含一个 Referer
头部,如下所示:
Referer: http://www.example.com/index.html
http://www.othersite.com
的服务器可以查看 Referer
头部,了解用户是从哪个页面跳转过来的。这可以帮助网站管理员了解他们的网站流量来源。同时,Referer
头部有时也被用于反盗链措施,服务器可以检查 Referer
头部,以确保请求是从受信任的来源发起的。
注意事项
Origin
头部仅包含协议、域名和端口,没有路径信息,而Referer
头部则包含完整的 URI。Origin
头部主要用于 CORS 场景中,以确定是否允许跨域请求,而Referer
头部则广泛用于日志记录、防盗链和安全检查。- 由于隐私和安全考虑,某些用户或浏览器配置可能会剥离这些头部,或者使用
Referrer-Policy
头部来限制Referer
头部的信息量。
Access-Control-Allow-Origin
Access-Control-Allow-Origin
是一个 HTTP 响应头,用于指定在跨源资源共享(CORS, Cross-Origin Resource Sharing)中,允许哪些域名访问该资源。CORS 是一种机制,它使用额外的 HTTP 头来告诉浏览器让一个 web 应用运行在一个源上的脚本,有权限访问另一个源的选定资源。
当一个资源(如字体、JavaScript 等)从与请求网页不同的域、协议或端口请求时,浏览器会实施同源安全策略,阻止跨源 HTTP 请求。Access-Control-Allow-Origin
响应头是服务器告诉浏览器:对于请求的资源,哪些域是被允许的。
格式
Access-Control-Allow-Origin: <origin> | *
<origin>
指定了允许访问资源的域。这个值必须是请求来自的域的精确匹配,或者是一个特殊的值*
。*
表示接受任何域的请求,也就是说,资源可以被任何域访问。
示例
-
特定域名
如果服务器只允许来自
http://www.example.com
的跨源请求,服务器的响应将包含如下头部:Access-Control-Allow-Origin: http://www.example.com
这表明只有
http://www.example.com
上的页面可以请求这个资源。 -
任何域名
如果服务器配置为接受来自任何域的跨源请求,它将包含如下头部:
Access-Control-Allow-Origin: *
这意味着任何源的页面都可以请求这个资源。不过,使用通配符
*
需要谨慎,因为它可能会引入安全问题。尤其是在响应包含敏感数据时,应该避免使用*
,而是指定明确的、受信任的源。
注意事项
- 在处理带有凭证的请求(如 Cookies 和 HTTP 认证信息)时,
Access-Control-Allow-Origin
不能使用*
。必须指定一个明确的、受信任的域。 - 如果请求的资源需要多个域的访问权限,服务器需要在接收到请求后,根据请求的
Origin
头部动态设置Access-Control-Allow-Origin
的值。 - 使用
Access-Control-Allow-Origin
时,还可能需要配合其他 CORS 相关的头部使用,如Access-Control-Allow-Methods
和Access-Control-Allow-Headers
等,以实现完整的 CORS 支持。
通过适当配置 Access-Control-Allow-Origin
和其他相关的 CORS 响应头,开发者可以灵活控制资源跨源访问的权限,既保证了 Web 应用的安全性,又提高了资源的可用性和互操作性。