Question

我有像下面这样的AngularJS代码，但不幸的是它没有正常工作，我看到＆＃34; XMLHttpRequest无法加载http://lipsum.com/。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上＆＃34;在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，这是一个开放/公共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有更多详情。

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

1 个答案: