title: Retrieve image from Amazon S3 private bucket using Angular JS
body: <p>I am using Angular JS and WEB API for one of my website. As per requirement of website I am using Amazon S3 to store image in the bucket. </p>
  
  <p>I am using WEB API to upload image dynamically in my Amazon S3 Bucket using accesskey and secretaccess key.</p>
  
  <p>But now I want to display those uploaded images(not all at once) in website using Angular JS. Please note that bucket is not public. </p>
  
  <p>Can anyone please share the exact code with step by step guidelines to retrieve the image from Amazon S3 using Angular JS?</p>
  
  <p><strong>Edited(New Addition)</strong></p>
  
  <p>Based on the response I have added the below code:-</p>
  
  <pre><code>$scope.retrieveImage = function()
  {
     AWS.config.update({
              accessKeyId: "MyAccessKey", secretAccessKey: "MySecretKey"
          });
  
     var bucket = new AWS.S3({ params: { Bucket: "MyBucket" } });
  
     bucket.getObject({ Key: 'Datetime.png' }, function (err, file) {
       $scope.imgUrl = "";
     });
  }
  </code></pre>
  
  <p>I am getting the below error now:-</p>
  
  <blockquote>
    <p>Response to preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:PortNumber" rel="nofollow noreferrer">http://localhost:PortNumber</a>' is therefore not allowed
    access. The response had HTTP status code 403.</p>
  </blockquote>
  
  <p>I have added the following CORS configuration inside permission of MyBucket:-</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
  &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
      &lt;AllowedHeader&gt;Authorization&lt;/AllowedHeader&gt;
  &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>Please let me know what to be done on this?</p>
  
  <p><strong>Solution:-</strong>
  Amending the following CORS tag to <code>&lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;</code> works like charm. Thanks for all your responses.</p>