接口请求中调试可以看到Origin,其具体的作用
接口请求中带 Origin 是浏览器在跨域请求时自动添加的一个 HTTP 请求头,用于标识请求的来源(源)。Origin 头的主要作用是支持跨域资源共享(CORS)和增强安全性。
Origin 的含义
Origin 包含发起请求的源信息,包括协议(如 http 或 https)、主机名和端口号(如果有)。它的格式为:
Origin: <scheme>://<hostname>[:<port>]
例如:
- 对于 https://example.com:3000 发起的请求
Origin: https://example.com:3000
- 对于 http://localhost:8080 发起的请求:
Origin: http://localhost:8080
使用场景
1. 跨域请求
当浏览器检测到请求跨域(即源与目标服务器不同),会自动添加 Origin 头,以告知服务器请求来源。
- 示例: 前端页面的域名为 https://frontend.example.com,向 https://api.example.com 发起跨域请求:
GET /data HTTP/1.1 Host: api.example.com Origin: https://frontend.example.com
- 服务器响应: 如果服务器允许跨域,会返回类似以下内容:
HTTP/1.1 200 OK Access-Control-Allow-Origin: https://frontend.example.com
2. 安全检查
-
防止 CSRF 攻击:
当用户在一个站点登录后,如果第三方恶意站点伪造请求(如通过表单提交),Origin 头可以帮助服务器判断请求是否来自可信源。示例: 服务器可以验证 Origin 是否属于受信任的域:
if (req.headers.origin === 'https://trusted.com') { // 允许请求 } else { // 拒绝请求 }
与 Referer 的区别
- Origin:
包含发起请求的 基本源信息(协议、域名、端口),不包括具体路径或查询参数。 - Referer:
包含完整的请求来源 URL,包括路径和查询参数。
示例:
Referer: https://example.com/page?query=value
但: 在某些情况下(如 POST 请求或重定向),Referer 可能会被省略,而 Origin 始终包含基本源信息。
特殊情况
1、同源请求:
- 如果请求的目标和发起源相同,通常不会包含 Origin 头。
2、在非浏览器环境
- 在非浏览器环境(如 curl、Postman)中,Origin 不会自动添加,除非手动设置。
3、简单请求:
- 对于一些简单的跨域请求(如 GET 请求的 MIME 类型为 text/plain),Origin 头依然会被添加。
总结
Origin 是由浏览器自动设置的,用于:
- 确定请求的来源,用于跨域资源共享(CORS)。
- 增强安全性,帮助防止 CSRF 等攻击。
如果你在开发接口或调试请求,看到 Origin 头,通常意味着浏览器检测到了跨域,并向服务器声明了来源。