从s3加载svg文件到$ mdIconProvider - 400错误请求

时间:2016-03-21 06:31:41

标签: javascript angularjs amazon-s3 cors

我在我的网络应用程序中使用angularjs 1.5.2和angular material 1.1.0-rc1。

我从亚马逊的s3加载我的svg图像。

我创建了一个$ mdIconProvider来存储我要在页面中加载的svg文件列表。

app.config(["$mdIconProvider", function($mdIconProvider) {
    // Configure URLs for icons specified by [set:]id.
    $mdIconProvider
        .icon('menu', 'https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/menu.svg')
        .icon('add_cocktail','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/add_cocktail.svg')
        .icon('add_drink','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/add_drink.svg')
        .icon('admin_cocktails','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/admin_cocktails.svg')
        .icon('admin_drinks','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/admin_drinks.svg')
        .icon('admin_pending_images','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/admin_pending_images.svg')
        .icon('facebook','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/facebook.svg')
        .icon('google','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/google.svg')
        .icon('home','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/home.svg')
        .icon('inventory','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/inventory.svg')
        .icon('login','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/login.svg')
        .icon('logout','https://myalcoholist-tuxin-com.s3.amazonaws.com/svg/logout.svg');
}]);

当我加载页面时,我看到以主菜单svg为例(称为' menu')失败并显示400 Bad Request。而s3的反应是

<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>InvalidArgument</Code><Message>Unsupported Authorization Type</Message><ArgumentName>Authorization</ArgumentName><ArgumentValue>Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsInVzZXJHcm91cElkIjoxfQ.M_vAI-WzaxUY47jMK9ahdcvdgpI9UJIhop7ceqaov5g</ArgumentValue><RequestId>CF9968D3244FBC43</RequestId><HostId>kQzEPRTw55tOXaRaOWF2siKcgmQtqgmdTFMpe/yOCBcfB5hEStlqNV5ttdKwJTLDHfaPHGx9yrI=</HostId></Error>

现在我检查了https请求的标题,我看到了以下内容:

GET /svg/menu.svg HTTP/1.1
Host: myalcoholist-tuxin-com.s3.amazonaws.com
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: https://myalcoholist.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsInVzZXJHcm91cElkIjoxfQ.M_vAI-WzaxUY47jMK9ahdcvdgpI9UJIhop7ceqaov5g
Referer: https://myalcoholist.com/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,he;q=0.6

因此它会在标头中发送Authorization。为什么?

我已使用以下配置在s3存储桶中启用了CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://myalcoholist.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我想解决这个问题我需要知道如何从请求中删除Authorization标头......或者我可能错过了一些东西。

非常感谢有关该问题的任何信息。

谢谢。

0 个答案:

没有答案