Vue中调用Dropbox的filesListFolder接口出现fetch非法调用错误如何解决

你遇到的TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation报错，本质是全局fetch方法的执行上下文丢失导致的：浏览器环境下原生fetch方法默认绑定的执行上下文是window对象，你直接将fetch作为参数传入Dropbox实例配置时，SDK内部调用fetch的上下文不再是window，触发了JS的调用权限限制。

两种方案任选其一即可：

• 给传入的fetch手动绑定正确的全局上下文，将Dropbox实例配置中的fetch改为fetch: fetch.bind(window)
• 直接删除Dropbox实例配置中的fetch参数：最新版Dropbox SDK会自动识别浏览器环境下的全局fetch，不需要手动传入

getImages() {
  // 仅当需要兼容旧浏览器或者做服务端渲染时保留这行引入，现代浏览器原生支持fetch可直接删除
  require("isomorphic-fetch");
  const Dropbox = require("dropbox").Dropbox;
  const dbx = new Dropbox({
    accessToken: '替换为你自己的有效AccessToken', // 注意你原代码里的token拼写是AcessToken，少了字母c，注意修正
    fetch: fetch.bind(window) // 不需要手动传fetch的话直接删掉这行即可
  });
  dbx.filesListFolder({ path: '' })
      .then(function(response) {
        console.log(response.entries);
      })
      .catch(function(error) {
        console.error(error);
      });
}

• 不要将Dropbox的access token硬编码在前端代码中，生产环境这么做会泄露你的Dropbox账号全部访问权限，建议改为后端接口代理请求，或者走OAuth2授权码流程获取临时token
• 你选择的全Dropbox访问权限是符合需求的，path: ''的配置也正确，就是拉取账号根目录下的所有文件、文件夹条目

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