JavaScript API获取请求CORS错误

我很新，如果我使用错误的术语，则很抱歉。我正在尝试使用trello API提取数据，但在Chrome Console中收到以下错误：

无法加载https://api.trello.com/1/cards/5A42E19364345A7D84BA3F5F/members：响应中'access-control-allow-origin'标头的价值一定不可能是通配符'*'请求的凭据模式为"包括"。因此，不允许访问原点'http：//localhost：8080'。XMLHTTPRequest发起的请求的凭据模式由withCredentials属性控制。

进行了一些研究后，我发现这是一个CORS问题。我正在使用Python使用Google App Engine。我可以解决这个错误还是API的错误？我已经设法使用此API进行了发布请求。我已经阅读了很多有关COR的信息，但还没有找到解决问题的方法。

这是我的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);

看起来您正在尝试将两种与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键和令牌。

相关内容

最新更新

热门标签：