Chrome扩展带<all_url>权限时，为GET请求添加Origin头的其他方法

以下几种方式可以让你的扩展请求自动带上符合要求的Origin头，无需修改请求：

1. 借助后台脚本/服务工作者发起请求 #

扩展的后台上下文（背景页、服务工作者）发起的跨域请求，浏览器会自动添加Origin: chrome-extension://<你的扩展ID>头，完全符合你的API验证要求。实现流程很简单：

• 内容脚本或弹出页通过chrome.runtime.sendMessage向后台传递请求参数
• 后台接收到消息后，直接调用目标API
• 后台将API响应结果返回给发起请求的页面

示例代码：

服务工作者（service-worker.js） #

chrome.runtime.onMessage.addListener((req, sender, sendRes) => {
  if (req.action === 'callAPI') {
    fetch(req.url, {
      method: req.method || 'GET',
      headers: req.headers || {},
      body: req.body
    })
    .then(res => res.json())
    .then(data => sendRes({ ok: true, data }))
    .catch(err => sendRes({ ok: false, error: err.message }));
    return true; // 标记为异步响应
  }
});

内容脚本/弹出页 #

chrome.runtime.sendMessage({
  action: 'callAPI',
  url: 'https://your-api-domain.com/endpoint',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
}, (res) => {
  if (res.ok) {
    console.log('API返回结果:', res.data);
  } else {
    console.error('请求失败:', res.error);
  }
});

2. 显式设置fetch的mode: 'cors'参数 #

如果必须在内容脚本或弹出页直接发起请求，给fetch加上mode: 'cors'配置，浏览器会自动带上扩展的Origin头。前提是你已经在manifest.json的host_permissions中声明了目标API的URL。

示例：

fetch('https://your-api-domain.com/endpoint', {
  method: 'GET',
  mode: 'cors', // 开启CORS模式后自动添加Origin
  headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(data => console.log(data));

3. 使用XMLHttpRequest发起请求 #

和fetch类似，直接用XHR发起跨域请求（已声明host权限的情况下），浏览器也会自动添加扩展的Origin头：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://your-api-domain.com/endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send(JSON.stringify({ key: 'value' }));

额外提示 #

• 后台发起请求的方式最稳妥，因为它不受内容页面的环境限制，完全在扩展的权限控制范围内
• 无论哪种方式，都确保manifest.json中正确配置了host_permissions，否则请求会被浏览器拦截

内容的提问来源于stack exchange，提问作者sagar bajpayee