如何将 $sce.trustAsResourceUrl 与 $http 服务一起使用

Posted 2023-03-04

【中文标题】如何将 $sce.trustAsResourceUrl 与 $http 服务一起使用

【英文标题】：How to use $sce.trustAsResourceUrl together with $http service

【发布时间】：2017-10-22 18:18:33

【问题描述】：

我有如下 AngularJS 代码，但不幸的是它不能正常工作，我看到“XMLHttpRequest cannot load http://lipsum.com/. No 'Access-Control-Allow-Origin' header is present on the请求的资源”在 JS 控制台中。

var app = angular.module('plunker', []);

app.config(function($sceDelegateProvider) 
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'http://lipsum.com/**'
  ]);
)

.controller('MainCtrl', function($scope, $sce, $http) 
  var url = 'http://lipsum.com/';
  $http(
    url: $sce.trustAsResourceUrl(url),
    method: "GET"
  ).then(
    function(response) 
      console.log('success', response);
      $scope.status = response.status;
    ,
    function(response) 
      console.log('error', response);
      $scope.status = response.status;
    
  );
);

http://plnkr.co/edit/ZDNJ3bfO1YlRQhUmNHZj?p=preview

如何使用 $http 方法使其正常工作并获得成功的响应？

感谢您的帮助！

【问题讨论】：

你尝试过javascript的“encodeURI(url)”而不是角度转义吗？

【参考方案1】：

假设http://lipsum.com/ 是您真正想要获取的网站，您可以这样做：

var url = "https://cors-anywhere.herokuapp.com/http://lipsum.com/";

...您的前端代码将按预期工作。

有效的原因是，它会导致请求转到 https://cors-anywhere.herokuapp.com，这是一个开放/公共 CORS 代理，然后会将请求发送到 http://lipsum.com/。

当该代理收到响应时，它会接受它并向其添加 Access-Control-Allow-Origin 响应标头，然后将其作为响应传递回您的请求前端代码。

带有Access-Control-Allow-Origin 响应标头的响应是浏览器看到的，因此浏览器现在向您显示的错误消息消失了，并且浏览器允许您的前端 JavaScript 代码访问响应。

或者使用https://github.com/Rob--W/cors-anywhere/的代码或者类似的代码来设置你自己的代理。

您需要代理的原因是，http://lipsum.com/ 本身不发送 Access-Control-Allow-Origin 响应标头，因此您的浏览器将拒绝让您的前端 JavaScript 代码跨域访问来自 http://lipsum.com/ 的响应。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有更多详细信息。

【讨论】：

有没有办法避免额外的代理？例如。对于 iframe，$sceDelegateProvider.resourceUrlWhitelist() 按预期工作，但对于 $http 无效。

只要您从前端 JavaScript 代码向不发送访问控制的站点发出跨域请求，就无法避免使用某种代理-Allow-Origin 响应中的响应标头