如何在scriptWrapper回调中捕获响应并覆盖响应头，解决JSONP MIME类型不符合规范的浏览器告警问题

我已经用JavaScript实现了从远程源下载元数据，代码如下：

function scriptWrapper(responseObject) { // parse jsonp and override DOM object inner html value }
const doGetMetaDataEvent = async () => {
    setInterval(async () => {
        const script = document.createElement('script');
        script.src = METADATA_SOURCE + '?callback=scriptWrapper';
        document.getElementsByTagName('head')[0].appendChild(script);
    }, REFRESH_TIMEOUT);
}

现在遇到浏览器告警：

尽管来自“https://radiohost.example.endpoint&informationjson=true?callback=scriptWrapper”的脚本MIME类型为“application/jsonp”，并非有效的JavaScript MIME类型，该脚本仍被加载。

核心疑问：我应该在哪里捕获响应，并通过response.setHeader('X-Content-Type-Options', 'nosniff')覆盖对应的响应头？

兄弟，先给你划个关键结论：前端JavaScript代码完全没办法修改远程服务器返回的响应头——浏览器的安全机制直接锁死了这个操作，你只能在服务器端或者代理层搞定这个问题。

具体分两种场景说：

1. 这个JSONP接口是你自己维护的 #

直接找到后端处理该请求的代码，在返回响应时做两个关键修改：

• 把Content-Type改成标准的JavaScript MIME类型，比如application/javascript（application/jsonp不是官方标准类型，这才是浏览器告警的核心原因）
• 加上X-Content-Type-Options: nosniff响应头

拿Node.js+Express举个实际代码例子：

app.get('/your-jsonp-endpoint', (req, res) => {
  const callbackName = req.query.callback;
  const metadata = { /* 你的元数据内容 */ };
  
  // 设置合规的响应头
  res.setHeader('Content-Type', 'application/javascript');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  
  // 返回JSONP格式的响应体
  res.send(`${callbackName}(${JSON.stringify(metadata)})`);
});

不管你用的是Java、PHP还是其他后端语言，逻辑都是一致的：在返回JSONP内容前，先配置好这两个响应头。

2. 接口是第三方提供的，你无法修改对方服务器 #

那你有两个可选方案：

• 搭建自己的代理服务：前端请求你的代理，由代理去调用第三方的JSONP接口，然后在代理层修改响应头后再返回给前端。这样浏览器拿到的就是合规的响应头，不会再弹出告警。
• 暂时忽略告警：虽然浏览器会提示，但JSONP请求大概率还是能正常工作。不过从安全和规范角度来说，更推荐用代理的方式彻底解决问题。

最后补充一句：X-Content-Type-Options: nosniff的作用是强制浏览器严格按照响应头的MIME类型解析内容，避免一些基于MIME混淆的攻击。配合正确的Content-Type，既能解决告警问题，还能提升接口的安全性。

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