[英]Access Amazon s3 using http in angular2
当我尝试在我的Angular2应用程序中使用http调用访问该文件时,我的Amazon s3存储桶中有一个.json文件我收到错误
跨源请求已阻止:同源策略禁止在https://s3.us-east-2.amazonaws.com/....../list.json上读取远程资源。 (原因:缺少CORS标题'Access-Control-Allow-Origin')。
我在我的存储桶中将文件公开,并将访问权限作为读取,写入和编辑。
这是我的角色代码:
getValue(){
return this._http.get('https://s3.us-east-2.amazonaws.com/........./list.json').toPromise().then(res => <Contact[]> res.json().data)
.then(data => {return data;});
}
我在AWS中的跨源XML
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
任何人都可以帮我解决这个问题在此先感谢您
可能与您的Angular代码无关。 查看CORS上的AWS S3文档 。 您需要在存储桶中设置CORS配置。 文档以此为例:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://www.example1.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>http://www.example2.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
文档还说:
要配置存储桶以允许跨源请求,您需要创建一个CORS配置,一个XML文档,其中包含用于标识允许访问存储桶的起源的规则,操作(HTTP方法)将支持每个源,以及其他操作-具体信息。
这允许您决定哪些来源可以访问您的存储桶(例如,如果您希望所有来源都能够访问它,您可以使用通配符*
)。
您需要在S3中编辑CORS配置以传递AllowedOrigin标头:
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://your-exact-domain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
CORS配置的设置在您的存储桶的权限设置下:
你可以看到这篇文章:
例:
HTML
<div ng-app="Test">
<div ng-controller="corsCtrl">
<button ng-click="useHttp()">$http.get request</button>
<button ng-click="useResource()">$resource request</button>
</div>
</div>
使用Javascript
angular.module('Test', ['ngResource']).controller('corsCtrl', function ($scope, $http, $resource) {
$http.defaults.useXDomain = true;
$scope.useHttp = function() {
$http.get('http://ricardohbin.com/cors/testcors.php')
.success(function(data) {
alert(data.ok);
});
};
$scope.useResource = function() {
var User = $resource('http://ricardohbin.com/cors/testcors.php', {
userId: '@id'
});
User.get({
userId: 123
}, function(data) {
alert(data.ok);
});
};
});
参考
<script type="text/javascript" src="http://ricardohbin.com/cors/angular.js/angular.min.js"></script>
<script type="text/javascript" src="http://ricardohbin.com/cors/angular.js/angular-resource.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.