使用fetch获取需登录的外部JSON接口数据时遇CSP报错的解决方法

首先明确两个关键事实：

• 你看到的CSP报错，是当前你打开的第三方站点设置的安全规则，不是目标接口所在站点的规则。CSP（内容安全策略）是站点部署在自身HTTP响应头里的安全屏障，作用是限制当前页面的前端代码只能向规则白名单内的域名发网络请求，防止恶意脚本窃取页面数据。普通网页内的JS代码没有权限修改或者绕过当前页面的CSP规则，只要你在这个页面的上下文里发请求，就必须遵守规则约束，没有所谓的“技巧”可以合规突破。
• 报错里被拦截的example.example.net是当前页面自带的前端监控SDK的上报地址，和你要请求的目标接口没有直接关系。你遇到的核心问题是：在非目标站点的页面上下文中发跨站请求，必然会被当前页面的CSP规则拦截，不存在在别人的页面控制台里合规绕过CSP的方法——硬突破的行为本身就违反对方的站点规则，还可能触发账号风控。

方案1：直接在目标站点自身的页面上下文执行请求 #

这是最简单、无额外配置的方案，适合临时测试或者轻量抓取：

• 先正常登录到目标接口所属的example.com主站，打开任意一个主站的页面
• 按F12打开控制台，在这个主站自身的页面上下文里发请求，由于是同域请求，不会触发主站的CSP规则，还能自动带上你登录后的会话凭证，不需要额外处理权限
• 参考请求代码：

  // 必须在example.com的主站页面控制台执行
  fetch("https://example.com/booking-api/api/v1/example-availability", {
    credentials: "include" // 关键：自动携带当前域的登录Cookie
  })
  .then(res => res.json())
  .then(data => console.log("抓取到的接口数据：", data))
  .catch(err => console.error("请求异常：", err))
  

方案2：用浏览器扩展实现自动定时抓取 #

这是最适合长期自动运行的方案，完全不受网页CSP规则约束：

• 浏览器扩展运行在独立的权限沙箱里，只要在扩展配置中申请目标接口所在域名的访问权限，就可以直接发起请求，不受当前打开的任意网页的CSP限制
• 配置时只要记住几个关键点：
  • 在扩展的配置文件manifest.json中，把目标接口的域加入host_permissions白名单，声明允许扩展访问该地址
  • 使用浏览器自带的定时任务API（如chrome.alarms）设置固定周期的触发规则，比如每日8点、20点各执行一次抓取
  • 抓取到的数据可以存储在浏览器本地，支持随时导出查看
• 这种方式只会使用你自己已经合法登录的账号权限获取你本来就有权查看的内容，完全符合站点的使用规则

方案3：本地运行独立脚本实现定时抓取 #

这种方式完全脱离浏览器环境，从操作系统层面发起网络请求，不受任何网页的CSP规则影响：

• 可以用任意支持发HTTP请求的语言写简单脚本，比如Python的requests库、Node.js的axios库
• 操作时要注意几个细节：
  • 独立脚本不会自动携带你的站点登录凭证，需要从你已登录的浏览器中，把目标站点的会话Cookie复制到脚本的请求头里，才能拿到需要权限的接口数据
  • 定时任务可以用系统自带的计划工具配置：Windows用任务计划程序、Mac/Linux用cron，设置每日固定时间自动运行脚本
  • 妥善保管你的登录Cookie，不要泄露给第三方，避免账号被盗用

• 不要使用所谓“一键绕过CSP”的油猴脚本，这类脚本很多会窃取你的浏览器Cookie和浏览数据
• 不要通过修改Chrome启动参数关闭全局CSP，会彻底移除浏览器的安全防护，大幅提升被恶意站点攻击的风险
• 不要高频向目标接口发请求，很容易触发对方的反爬风控，导致你的账号被限制访问

内容的提问来源于stack exchange，提问作者Bunsen Honeydew