无法在 JavaScript 中调用 api(跨源)

Posted

技术标签:

【中文标题】无法在 JavaScript 中调用 api(跨源)【英文标题】:Unable to call an api in JavaScript (cross origin) 【发布时间】:2014-10-05 03:46:45 【问题描述】:

我编写了以下 javascript 来调用 Smartsheet API:

$.get( "https://api.smartsheet.com/1.1/users/sheets", "Authorization: Bearer [My Access token]" )
.done(function( data ) 
    alert( "Data Loaded: " + data );
);

但这引发了以下错误:

XMLHttpRequest cannot load https://api.smartsheet.com/1.1/users/sheets?Authorization:%20Bearer%[My Access token]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

经过一番阅读,我意识到代码必须发出跨域资源共享 (CORS) 请求。我从here 找到了以下代码来使用jQuery:

function createCORSRequest(method, url) 
      var xhr = new XMLHttpRequest();
      if ("withCredentials" in xhr) 
        xhr.open(method, url, true);
       else if (typeof XDomainRequest != "undefined") 
        xhr = new XDomainRequest();
        xhr.open(method, url);
       else 
        xhr = null;
      
      alert("cors created");
      return xhr;


var xhr = createCORSRequest('GET', "https://api.smartsheet.com/1.1/users/sheets?Authorization=Bearer+[My Access token]");
if (!xhr) 
    throw new Error('CORS not supported');

xhr.onload = function() 
    var text = xhr.responseText;
    alert('Response from CORS request: ' + text);
;
xhr.onerror = function() 
    alert('Woops, there was an error making the request.');
;
xhr.send();

但是,这又在我的浏览器控制台中产生了同样的错误:

XMLHttpRequest cannot load https://api.smartsheet.com/1.1/users/sheets?Authorization=Bearer+[My Access token]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

我是否朝着正确的方向前进?我该如何解决这个问题?

谢谢。

【问题讨论】:

更改必须发生在服务器端。服务器必须提供“Access-Control-Allow-Origin”标头。 既然是跨域请求...目标api应该支持CORS或者jsonp... 这能回答你的问题吗:***.com/questions/12901815/…? 补充阅读:enable-cors.org @dystroy:但我无法更改服务器。如果服务器不提供“Access-Control-Allow-Origin”标头,我还能通过什么其他方式完成这项工作? 【参考方案1】:

正如在 cmets 中提到的,Smartsheet API 目前不支持 CORS。

【讨论】:

stmcallister 是正确的。我们目前不支持我们的 API 的 JS 接口,也不支持 CORS。您的另一个选项是 jsonp - 它可以实现更大的向后兼容性,但仅限于 GETs ***.com/questions/12296910/so-jsonp-or-cors。另一个要点 - 我怀疑你已经知道这一点 - 但我强烈建议你不要在公共网站上提供此 JS 代码,因为任何人都可以读取你的 API 访问令牌。 不会因为无法发送标头而导致 jsonp 也失败吗? SS API 需要 Authorization 标头。

以上是关于无法在 JavaScript 中调用 api(跨源)的主要内容,如果未能解决你的问题,请参考以下文章

Wolfram API javascript 跨源共享问题

javascript Ajax调用(带有无聊的跨源问题)

无法在 Django 网站中发布跨源请求

浏览器可以直接调用react项目里的代码接口吗

从 Angular4 调用 Spring Rest 服务时的 CORS(跨源问题)

Django rest 框架和跨源请求