title: Access s3 files only from web application and localhost
body: <p>I'm developing an web application for which I host my files like images on s3. I want to access the files via URLs (not presigned URLs) in my img-tags like so:</p>
  
  <pre><code>&lt;img src={'https://s3.us-east-2.amazonaws.com/mybucketname/imgs/myfile.jpg'} /&gt;
  </code></pre>
  
  <p>How can I restrict access to only my react application (for prod and dev)? </p>
  
  <p>I tried using CORS with my deployed domain and localhost but that didn't work:</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;https://www.example.com&lt;/AllowedOrigin&gt;
      &lt;AllowedOrigin&gt;https://example.com&lt;/AllowedOrigin&gt;
      &lt;AllowedOrigin&gt;http://localhost:3000&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
      &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
  &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>