text/javascript类型脚本返回MIME为image/gif无法执行如何解决

问题本质 #

你遇到的报错Refused to execute script from 'https://api.viglink.com/api/sync.js?key=61641f74b8eb29a4321bb1f55d6030c5' because its MIME type ('image/gif') is not executable翻译为「拒绝执行来自对应地址的脚本，因为它的MIME类型（'image/gif'）不可执行」，这是浏览器的默认安全策略拦截。
你在前端<script>标签上声明的type="text/javascript"只是告知浏览器该标签的预期类型，无法修改远端服务器返回的响应头Content-Type属性，返回资源的MIME类型完全由提供资源的服务端控制，只有当服务端返回的MIME类型为可执行的JS类型（text/javascript/application/javascript）时，浏览器才会执行脚本。
你收到的image/gif返回值本质是VigLink服务端返回的1x1统计像素，并非JS脚本，通常是鉴权失败导致的。

可行解决方案 #

• 方案1：核对VigLink配置（优先级最高） #

  绝大多数该类报错都是配置异常导致的，优先排查以下项：
  1. 你代码中填写的key是否和VigLink后台分配的完全一致，是否有拼写错误
  2. 你当前部署代码的域名，是否已经在VigLink后台完成绑定、加入白名单
  3. 是否触发了VigLink的风控规则，导致服务端返回统计像素代替JS脚本
     配置修正后服务端会正常返回JS资源，MIME类型会自动符合要求。

• 方案2：通过服务端代理修改响应头 #

  若确认VigLink配置无问题，可以在你自己的服务端新增代理接口，转发VigLink的JS资源请求，手动修改返回的Content-Type头。
  以Nginx反向代理为例，新增配置如下：

  location /proxy/vglnk.js {
      # 转发请求到VigLink服务端
      proxy_pass https://cdn.viglink.com/api/vglnk.js;
      # 删掉原服务端返回的Content-Type头
      proxy_hide_header Content-Type;
      # 新增正确的JS类型头
      add_header Content-Type text/javascript;
  }
  

  配置完成后把你代码中s.src的地址改为你的代理接口地址即可：

  s.src = '/proxy/vglnk.js';
  

• 方案3：手动拉取脚本内容执行（仅适合本地测试，不推荐生产使用） #

  本地调试时可以用fetch直接拉取脚本内容，跳过浏览器对script标签的MIME校验：

  var vglnk = {key: '61641f74b8eb29a4321bb1f55d6030c5'};
  (async function() {
      const res = await fetch('//cdn.viglink.com/api/vglnk.js');
      const jsContent = await res.text();
      const s = document.createElement('script');
      s.text = jsContent;
      document.head.appendChild(s);
  })();
  

  注意：该方案需要VigLink服务端开启CORS跨域允许，否则会被跨域策略拦截，且存在XSS安全风险，禁止在生产环境使用。

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