Javascript API GET 请求 CORS 错误

标签 javascript cors trello

我很新,如果我使用了错误的术语,我深表歉意。我正在尝试使用 Trello API 提取数据,但在 Chrome 控制台中收到以下错误:

Failed to load https://api.trello.com/1/cards/5a42e19364345a7d84ba3f5f/members: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

经过一些研究,我发现这是一个 CORS 问题。我正在使用带有 Python 的 Google App Engine。这个错误是我可以修复的还是 API 的错误?我已经设法使用此 API 执行 POST 请求,没问题。我已经阅读了很多关于 CORS 的信息,但还没有找到解决问题的方法。

这是我的 GET 请求的 Javascript 代码,它只是从 Trello API 复制/粘贴而来,所以我不确定哪里出了问题:

var authenticationSuccess = function() {
  console.log('Successful authentication');
};

var authenticationFailure = function() {
  console.log('Failed authentication');
};

window.Trello.authorize({
  type: 'popup',
  name: 'Work Requests App',
  scope: {
    read: 'true',
    write: 'true' },
  expiration: 'never',
  success: authenticationSuccess,
  error: authenticationFailure
});

var data = JSON.stringify(false);

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members");

xhr.send(data);

最佳答案

看起来您正在尝试将两种不同的 Trello API 工作方式组合在一起 - 使用 client.js并发出直接的 HTTP 请求。

我建议开始时只使用 client.js,因为它在使用 Trello 的 API 时提供了许多辅助函数。例如,.authorize() 方法将引导您为您的 API key 生成 token 并将其存储在本地。要请求获取您在示例中仅使用 client.js 的卡片数据,您的代码应如下所示:

<html>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script src="https://trello.com/1/client.js?key=XXXXXXXXX"></script>
  <script>

    var requestSuccess = function(response) {
      console.log(JSON.stringify(response, null, 2));
    }

    var authenticationSuccess = function() {
      console.log('Successful authentication');
      // Now that you are authenticated, you can start
      // making requests to the API
      window.Trello.rest("GET", "cards/5a42e1936434a7d84ba3f5f/members", requestSuccess);
    };

    var authenticationFailure = function() {
      console.log('Failed authentication');
    };

    window.Trello.authorize({
      type: 'popup',
      name: 'Work Requests App',
      scope: {
        read: 'true',
        write: 'true' },
      expiration: 'never',
      success: authenticationSuccess,
      error: authenticationFailure
    });
  </script>
</html>

当您在脚本中包含 client.js 时,您需要包含您的 API(在登录 Trello 时通过访问 trello.com/app-key 获得)。将上面的 XXXXXXXXX 替换为您的 API key 。

如果您更愿意直接向 Trello 的 API 发出 HTTP 请求,您将需要生成一个 token (您可以从检索 API key 的同一页面执行此操作),您的代码将如下所示:

<html>
  <script>  
    var xhr = new XMLHttpRequest();

    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === this.DONE) {
        console.log(this.responseText);
      }
    });

    var yourToken = "XXXXXXXXXX";
    var yourKey = "XXXXXXXXXX";

    xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members?key=" + yourKey + "&token=" + yourToken);

    xhr.send();
  </script>
</html>

同样,您需要添加 API key 和 token 。

关于Javascript API GET 请求 CORS 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47985164/

相关文章:

使用 CORS 在 IIS 上运行的 Angular 2 和 .net 核心 Web 应用程序之间的 HTTP 415 OPTIONS 请求

c# - 在 c# 中为 trello api 硬编码登录凭据

powershell - 如何使该PowerShell Web请求正确保存 session ?

javascript - Chrome 扩展程序内容脚本在页面刷新之前不会加载

javascript - 业力 Webpack 源 map 不工作

javascript - 仅 IE7 中的 jQuery 问题

javascript - 在 Ajax 请求上设置 Cookie 到外部域

javascript - 在调整大小和放大图表时隐藏 Highcharts 标签

javascript - GWT native 函数 - 每个字符串的引用

go - 使用 Golang、Revel 处理预检请求