Amazon S3 - ERR_INSECURE_RESPONSE
<p>This question has already been asked <a href="https://stackoverflow.com/questions/34589296/amazon-s3-err-insecure-response-on-laravel">here</a> but that answer didn't help me as I know that the URL is correct as it points to a US Standard url as detailed in the amazon guide <a href="http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region" rel="nofollow noreferrer">here</a></p>

<p>So I'm attempting to upload a file to my bucket via the angular library <strong>ng-file-upload</strong>. I believe that I've setup the bucket correctly:</p>

<ul>
<li>The buckets name is <strong>ac.testing</strong></li>
<li><p>The CORS configuration for this:</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;POST&lt;/AllowedMethod&gt;
    &lt; AllowedHeader&gt;*&lt;/AllowedHeader&gt;
  &lt; /CORSRule&gt;
&lt; /CORSConfiguration&gt;
</code></pre></li>
</ul>

<p>I had to put a space after the opening brackets above as SO didn't let me add it if I didn't.</p>

<p>I've understood this as <strong>allow POSTS from any location regardless of heading</strong> - is that correct?</p>

<p>And my policy which I generated:</p>

<pre><code>{
    "Version": "2012-10-17",
    "Id": "Policy&lt;numbers&gt;",
    "Statement": [
        {
            "Sid": "Stmt&lt;numbers&gt;",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::ac.testing/*"
        }
    ]
}
</code></pre>

<p>Finally - in my actual code that attempts to upload:</p>

<pre><code>      var policy = {
        "expiration": "2020-01-01T00:00:00Z",
        "conditions": [
          {"bucket": "ac.testing"},
          ["starts-with", "$key", ""],
          {"acl": "private"},
          ["starts-with", "$Content-Type", ""],
          ["starts-with", "$filename", ""],
          ["content-length-range", 0, 524288000]
        ]
      }

      var uploadDetails = {
        url: 'https://ac.testing.s3.amazonaws.com/',
        method: 'POST',
        data: {
          key: file.name, 
          acl: 'public-read', 
          // application/octet-stream is the default format used by S3
          'Content-Type': file.type != '' ? file.type : 'application/octet-stream', 
          AWSAccessKeyId: '&lt;my-access-key-id&gt;',
          policy: policy, 
          signature: '&lt;my-access-signature&gt;',
          filename: file.name, 
        },
        file: file
      };


      if (file) {
        // Upload to Amazon S3
        file.upload = Upload.upload(uploadDetails).then(function(success) {
          console.log(JSON.stringify(success) );
        },function(error) {
          console.log(error);
        },function(progress) {
          console.log(JSON.stringify(progress) );
        });
      }  
</code></pre>

<p>So where am I going wrong here?</p>

<p><strong>EDIT</strong> </p>

<p>A couple of things that I wasn't doing was encoding the policy and the signature according to Base64 encoding. </p>

<p>That process involves encoding your policy and then using that generated code, along with your AWS Secret Access Key to generate an SHA-1 HMAC code. Even after this it still returns the same error.</p>

<p>I also added another <strong>Permission</strong> for the bucket. It matches the policy and CORS settings already defined here but is defined as everyone:</p>

<p><a href="https://i.stack.imgur.com/YUvEC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YUvEC.png" alt="Permission"></a></p>

<p><strong>EDIT 2</strong></p>

<p>I created a new bucket called <strong>ac-k24-uploads</strong> and updated the url to match this:</p>

<pre><code>uploadDetails = {
    url: 'https://ac-k24-uploads.s3.amazonaws.com/',
</code></pre>

<p>Now the error coming back is this:</p>

<p><a href="https://i.stack.imgur.com/1DJWo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1DJWo.png" alt="enter image description here"></a></p>

<p><strong>EDIT 3</strong></p>

<p>Looking around it seems that headers that amazon doesn't like are being added to the request. I tried it on ng-file-uploads and it works but on my own machine it doesn't. The fix for this seems to be removing these headers like so:</p>

<pre><code>method: 'POST',
  headers: {
    'Authorization': undefined
  },
</code></pre>

<p>but I still get the same error. Why are these headers being attached to this request?</p>

<p><strong>EDIT 4</strong></p>

<p>Even with the code above the headers were still getting added at a different place so I located it and remove them. The error which I recieve now is this:</p>

<p><a href="https://i.stack.imgur.com/7Tyb5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Tyb5.png" alt="enter image description here"></a></p>