logo标签列表

JavaScript API GET请求CORS错误

javascriptcorstrello
3

我是一名新手，如果我使用了错误的术语，请见谅。我试图使用Trello API获取数据，但在Chrome控制台中收到以下错误：

无法加载https://api.trello.com/1/cards/5a42e19364345a7d84ba3f5f/members：当请求的凭据模式为“include”时，响应中的'Access-Control-Allow-Origin'头的值不能为通配符'*'。因此，源'http://localhost:8080'不允许访问。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

经过一些研究，我发现这是一个CORS问题。我正在使用Python的Google App Engine。这个错误是我能够解决还是API的错误？我已经成功使用此API进行了POST请求。我阅读了许多关于CORS的信息，但没有找到解决这个问题的方法。

这里是我的JavaScript代码，用于GET请求，它只是从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);
1
是的。如果我将其设置为false，它就不会进行身份验证。另外，你为什么把这个问题标记为重复？我没有使用Java/Spring/Angular/SockJS，那些答案怎么可能帮助我？没有一个答案适用，而且这个问题只发生在Chrome浏览器中。 - user9109814
1
为什么不使用client.js API来执行请求呢？它会在授权后存储所需的凭据，并将它们作为参数/标头添加到请求中。此外，我认为您需要在授权成功后（即在authenticationSuccess回调中）执行这些操作。 - Phil
我以为我在使用 client.js，因为它包含在我的 HTML <script src="https://api.trello.com/1/client.js?key={key}"></script> 中。我的 JavaScript 其他部分都是从他们的文档中复制的，并添加了适当的密钥。 - user9109814
1
我已经为您提出了一个API文档错误 ~ https://github.com/trello/api-docs/issues/150 - Phil
与此同时，我建议您尝试使用Trello对象方法。 - Phil
显示剩余4条评论
1个回答
0

看起来你正在尝试将两种不同的 Trello API 工作方式结合在一起 - 使用 client.js 和直接进行 HTTP 请求。

我建议您先仅使用 client.js，因为它提供了许多在使用 Trello API 时的辅助函数。例如，.authorize() 方法将引导您生成 API 密钥的令牌，并将其存储在本地。要使用仅 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获取）。请使用您的API密钥替换上面的XXXXXXXXX。

如果您更愿意直接向Trello的API发出HTTP请求，则需要生成一个令牌（您可以从检索API密钥的同一页中执行此操作），您的代码将类似于以下内容：

<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 密钥和令牌。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接