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

添加头信息

以下提供了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'))
})

结果：