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

Question

我有一段如下所示的 AngularJS 代码，但不幸的是它无法正常工作，我看到“XMLHttpRequest 无法加载 http://lipsum.com/。没有 'Access-Control-Allow-Origin' header 出现在请求的资源”在 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方法使其正常工作并获得成功响应？

感谢您的帮助!

Answer 1

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

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

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

起作用的原因是，它会导致请求转到 https://cors-anywhere.herokuapp.com，一个开放/公共(public) CORS 代理，然后将请求发送到 http://lipsum.com/.

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

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

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

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

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