Jquery添加头信息的2种方法以及Referer头信息的作用

本文介绍两种设置HTTP请求头的方法,并探讨了Referer头的作用及安全考量,包括如何防止CSRF攻击、统计流量来源以及实现防盗链等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

添加头信息

以下提供了2种设置头信息的方法

     $.ajax({
        url: '/test',
        headers: {// 设置方法1:使用headers属性来设置
          a: 1,
          b: 2,
          Referer: 'http://localhost:3000/index.html'// 这句话试图在请求头中添加网站来源,由于浏览器的安全限制,该句不会生效,且报出'Refused to set unsafe header "Referer"'的错误
        },
        beforeSend(xhr) {
          // 设置方法2:使用setRequestHeader方法来设置
          xhr.setRequestHeader('c', 3)
          xhr.setRequestHeader('d', 4)
        },
      })

注意:并不是所有被添加的头信息都能生效,如:Referer

关于Referer

1 防止csrf

因为csrf是欺骗用户打开某个恶意网站,然后在这个网站隐性的发送被攻击网站的请求,如果Referer信息不受信任,被攻击网站可以拒绝此次恶意访问

2 用于统计网站流量来源

点击a链接,跳转至本站时,通常浏览器会带上Referer头信息,来标识来源,本站拿到这个信息,可以做统计分析

3 防盗链

用户访问本站资源时,后台拿到Referer头信息判断该用户来源是否在服务范围内,如果不在,可以响应403拒绝提供资源,或者响应302重定向到其他资源,以流量计费的网站适用此项技术,试想别人盗用你的资源,同时也浪费了你网站的流量,使用此项技术,可减少资源被盗用的风险

如下示例,是百度防盗链图片,没有Referer头信息时(在地址栏直接打开不带有Referer头信息)或者Referer头信息是baidu.com时,均可正常访问,如果不是,就会重定向到其他图片:

<img src="http://c.hiphotos.baidu.com/image/w%3D210/sign=ed30880babec8a13141a50e1c7029157/d52a2834349b033be1a9503e17ce36d3d539bd35.jpg?qq-pf-to=pcqq.group">

使用img标签访问以上图片,会显示:

如果使用地址栏直接打开图片url,则会正常显示:

破解防盗链

方法原理:破解防盗链的方法很简单,可以去除Referer头信息(伪造是直接在地址栏中打开)或者修改Referer头信息(伪造是可信网站来源)

node修改头信息示例:

// 使用superagent发起后台请求
const request = require('superagent')

app.all('/get', (req, res) => {
    request
        // 访问图片链接
        .get('http://c.hiphotos.baidu.com/image/w%3D210/sign=ed30880babec8a13141a50e1c7029157/d52a2834349b033be1a9503e17ce36d3d539bd35.jpg?qq-pf-to=pcqq.group')
        // 设置头信息(如果不设置,也是能正常下载到本地的,因为伪造了在地址栏中直接打开的假象,但是设置错误的话,就会重定向到其他图片了)
        .set('Referer', 'https://www.baidu.com')
        // 写入本地
        .pipe(fs.createWriteStream('test.png'))
})

结果:

 

<think>我们正在讨论如何在前端代码中添加HTTP请求头(请求标头)。根据用户的问题,他们想了解在前端代码中设置请求头的方法。根据引用[3],我们知道在前端设置请求头通常是在发起HTTP请求时设置的。常见的请求头包括Content-Type,Authorization等。在前端,我们可以通过以下几种方式设置请求头:1.使用原生JavaScript的XMLHttpRequest对象2.使用FetchAPI3.使用流行的JavaScript库,如Axios、jQueryAJAX等下面分别给出示例:方法一:使用XMLHttpRequest```javascriptvarxhr=newXMLHttpRequest();xhr.open('POST','https://example.com/api');xhr.setRequestHeader('Content-Type','application/json');xhr.setRequestHeader('Authorization','Bearertoken');xhr.send(JSON.stringify({key:'value'}));```方法二:使用FetchAPI```javascriptfetch('https://example.com/api',{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearertoken',//可以添加其他请求头},body:JSON.stringify({key:'value'})}).then(response=>response.json()).then(data=>console.log(data));```方法三:使用Axios首先需要引入Axios库,然后:```javascriptaxios.post('https://example.com/api',{key:'value'},{headers:{'Content-Type':'application/json','Authorization':'Bearertoken'}}).then(response=>console.log(response)).catch(error=>console.error(error));```注意:有些请求头是浏览器禁止设置的,如`Referer`和`User-Agent`等,这是出于安全考虑。另外,用户还提到了在Chrome浏览器中通过ModHeader插件修改请求头(引用[2]),这通常用于开发和调试阶段,而不是在生产代码中设置。根据引用[1],我们还可以知道后端如何读取请求头(Content-Type头),但用户问题主要在前端设置。总结:前端设置请求头主要是在发起请求时通过设置headers对象来完成。不同的请求方法有不同的设置方式,但原理相似。下面生成相关问题供用户深入学习。</think> ### 前端设置HTTP请求头指南 在前端设置HTTP请求头主要通过以下三种方式实现,下面详细说明每种方法: #### 一、使用 Fetch API 这是现代浏览器推荐的标准方法: ```javascript // 发起POST请求示例 fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_TOKEN', 'X-Custom-Header': 'custom-value' }, body: JSON.stringify({ key: 'value' }) }) .then(response => response.json()) .then(data => console.log(data)); ``` **关键点**: 1. 在`headers`对象内添加键值对 2. `Content-Type`必须与实际数据格式匹配(如JSON使用`application/json`) 3. 授权凭证通过`Authorization`头传递[^3] #### 二、使用 XMLHttpRequest 传统方法,兼容旧浏览器: ```javascript const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.onload = () => console.log(xhr.responseText); xhr.send('param1=value1&param2=value2'); ``` #### 三、使用 Axios 库 最简洁的第三方方案(需先安装`axios`): ```javascript axios.post('https://api.example.com/data', { data: 'value' }, { headers: { 'Accept-Language': 'zh-CN', 'Cache-Control': 'no-cache', 'Custom-Header': 'custom' } }) .then(response => console.log(response)); ``` #### ⚠️ 重要注意事项 1. **安全限制**:浏览器会禁止设置某些敏感头(如`Cookie`、`Host`、`Referer`等)[^3] 2. **CORS要求**:跨域请求时,后端需在响应头设置`Access-Control-Allow-Headers` 3. **内容协商**:通过`Accept`和`Accept-Language`头声明客户端处理能力[^3] #### 调试工具推荐 使用Chrome插件ModHeader实时修改请求头: 1. 安装后点击浏览器右上角扩展图标 2. 添加需修改的请求头键值对 3. 指定生效域名(如`*.example.com`) 4. 在开发者工具的Network标签页验证效果[^2] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值