Javascript API GET请求CORS错误
Posted
技术标签:
【中文标题】Javascript API GET请求CORS错误【英文标题】：Javascript API GET request CORS error 【发布时间】：2018-06-07 16:25:44 【问题描述】：我是新手，如果我使用了错误的术语，我深表歉意。我正在尝试使用 Trello API 提取数据，但在 Chrome 控制台中收到以下错误：
无法加载https://api.trello.com/1/cards/5a42e19364345a7d84ba3f5f/members：当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”。因此，Origin 'http://localhost:8080' 不允许访问。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。
在做了一些研究后，我发现这是一个 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);
【问题讨论】：
你为什么使用withCredentials = true？你知道what it does吗？
是的。如果我将其设置为 false，则不会进行身份验证。另外，您到底为什么将这个问题标记为重复？我没有使用 Java/Spring/Angular/SockJS，这些答案应该如何帮助我？没有任何答案适用，并且该问题仅发生在 Chrome 中的 OP 上。
重新打开。没想到这么不一样
你为什么不使用client.js API to perform the requests？大概它在授权后存储所需的凭据并将它们作为参数/标头添加到请求中。另外，我想说您需要在授权成功后执行这些操作（即在authenticationSuccess 回调中）
我为你提出了一个 API 文档错误 ~ github.com/trello/api-docs/issues/150
【参考方案1】：
您似乎正在尝试将两种不同的使用 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 获得）。将上面的 XXXXXXXXX 替换为您的 API 密钥。
如果您希望直接向 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 密钥和令牌。
【讨论】：
以上是关于Javascript API GET请求CORS错误的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js 对 API 的 GET 请求被 CORS 阻止
当 OPTIONS 请求的 statusCode 为 200 时，为啥我会在 API Gateway GET 请求中收到 CORS 错误？