授权api在Angular js中获取数据[重复]

Posted 2023-03-04

【中文标题】授权api在Angular js中获取数据[重复]

【英文标题】：Authorization of an api to get data in Angular js [duplicate]

【发布时间】：2020-01-10 13:45:12

【问题描述】：

我有一个 API 来获取我必须将授权放在标题中的数据，但它不起作用。这是邮递员中的图像

https://drive.google.com/open?id=18CY4uBc83u9AcN9Uu2SFXMjPgc4FPBzU

我已经应用了这个问题的答案 AngularJS Adding a header to the $http.get 但它没有用。

HTML：-

<button type="button" class="btn btn-primary btn-xs" ng-click="getApiData()">
  GET DATA
</button>

JS：-

$scope.getApiData = function()
    $http(
      method  : 'GET',
      url     : 'http://api.getlokalapp.com/posts/7678/?format=json',
      headers : 
        'Content-Type'  : 'application/json',
        'Authorization' : '5ae5f64653ce85803b44b7b6f4d216c2dae02251'
      
    )
    .then(function(response)
      console.log(response);
    );
  

我希望输出是响应，因为它显示在邮递员请求中，但我无法得到它，请帮助我从 API 获取数据。

我收到的错误消息是-

访问 XMLHttpRequest 在 'http://api.getlokalapp.com/posts/7678/?format=json' 来自原点 “http://localhost:9000”已被 CORS 策略阻止：响应 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

但我已经集成了其他 API，没有出现任何错误。

【问题讨论】：

这个问题来自 API 提供者方面。除了要求他们解决此问题并允许您使用他们的 API 之外，您无能为力，因为它被 CORS（跨源）政策阻止。

谢谢@VermaJr。如果您看到 gdrive 链接和我的代码，您的反馈和我的代码是正确的，您认为值的授权是否有任何错误

您的代码看起来不错。这个问题肯定是从他们这边来的。他们的 API 是否可供公众使用？

不，这是公司 api 我必须与我的团队核实

如果它不能供公众使用，那么这是一个非常正常的错误，因为浏览器会阻止它，因为出于安全原因它通常允许同源请求。您只是无法使用 javascript 访问他们的 API。

【参考方案1】：

除非 API 提供商在其后端添加 Access-Control-Allow-Origin 标头，否则您无法在生产代码中解决此问题。为了检查您的代码是否正常工作并查看结果，在 Windows 中，将此命令粘贴到运行 (Windows + R) 窗口中。

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

对于 Mac，

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

这将打开一个新的 Chrome 实例，该实例将授予您访问此 API 的权限，绕过浏览器安全性。

【讨论】：

你能告诉我mac的命令吗

这个命令没有绕过浏览器安全

最终，CORS 问题仅通过支持解决了