如何在JavaScript中正确设置Fetch请求的Referer

在JavaScript的网络请求场景中，Fetch API是替代传统XMLHttpRequest的主流方案，很多接口会校验请求的Referer字段来判断请求来源是否合法，因此正确设置Fetch请求的Referer成为开发中的常见需求。不过Referer属于浏览器的受限制请求头，直接通过Headers设置往往会失败，需要采用特定的方式实现。

为什么不能直接设置Referer

浏览器的安全机制规定，部分HTTP请求头属于禁止修改的请求头，Referer就是其中之一。当你尝试通过常规的Headers配置设置Referer时，浏览器会直接抛出错误，提示该请求头不允许被修改。这是为了防范恶意网站伪造请求来源，避免CSRF等安全攻击。

比如下面这段代码会直接报错：

// 错误示例：直接设置Referer会报错
fetch('https://ipipp.com/api/data', {
  headers: {
    'Referer': 'https://ipipp.com/source-page'
  }
}).then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err)); // 会抛出Referer不允许修改的错误

正确设置Referer的方法

方法一：通过referrer属性配置

Fetch API的配置项中提供了一个专门的referrer属性，用于设置请求的Referer值，这是官方支持的设置方式，不会触发浏览器的安全限制。

该属性的可选值包括：

• no-referrer：不发送Referer信息
• client：使用当前页面的URL作为Referer，这是默认值
• 自定义URL字符串：设置为你需要的Referer地址，需要是符合URL格式的字符串

示例代码如下：

// 正确示例：使用referrer属性设置Referer
fetch('https://ipipp.com/api/data', {
  // 设置自定义Referer地址
  referrer: 'https://ipipp.com/custom-source',
  // 还可以配合referrerPolicy设置Referer的策略，比如只发送源地址
  referrerPolicy: 'origin'
}).then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

方法二：结合代理服务设置

如果你的请求是跨域的，并且目标服务器对Referer校验非常严格，或者referrer属性设置后不生效，可以通过同域的代理服务转发请求。此时Fetch请求发送到同域的代理接口，Referer会是当前页面的地址，代理服务再转发请求到目标接口时，可以自定义设置Referer头，因为服务端的请求不受浏览器安全限制。

前端Fetch请求代理的示例代码：

// 前端请求同域代理接口
fetch('/api/proxy', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    targetUrl: 'https://ipipp.com/api/data',
    customReferer: 'https://ipipp.com/expected-referer'
  })
}).then(res => res.json())
  .then(data => console.log(data));

对应的Node.js代理服务示例（使用Express框架）：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.use(express.json());

app.post('/api/proxy', async (req, res) => {
  const { targetUrl, customReferer } = req.body;
  try {
    const response = await fetch(targetUrl, {
      headers: {
        'Referer': customReferer // 服务端可以正常设置Referer
      }
    });
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3000, () => {
  console.log('代理服务运行在3000端口');
});

注意事项

• referrer属性设置的URL必须是合法的，否则会被浏览器忽略，使用默认的client策略。
• referrerPolicy属性可以进一步控制Referer的发送内容，比如no-referrer-when-downgrade表示仅在协议降级时不发送Referer，same-origin表示仅同源请求发送Referer，可以根据实际需求选择。
• 如果目标接口设置了CORS限制，即使正确设置了Referer，也需要确保接口允许当前源的请求，否则还是会被拦截。
• 部分浏览器可能对referrer属性的支持存在差异，使用前可以通过兼容性查询确认目标浏览器的支持情况。

注意：Referer的拼写是HTTP规范中的历史遗留问题，正确的英文单词是Referrer，但是HTTP头中写的是Referer，编写代码时不要写错字段名。

FetchRefererJavaScriptHTTP_header修改时间：2026-06-27 23:39:29