title: React cannot download blob data through anchor tag on Chrome
body: <pre><code>const response = await axios({
    ...
  })
  
  if (response &amp;&amp; response.status == 200) {
     const url = window.URL.createObjectURL(
        new Blob([response.data], { type: 'text/plain' }),
     )
  }
  setState({
    ...state,
    fileLink: url,
  })
  
  JSX
  
  {state.fileLink &amp;&amp; (
    &lt;p&gt;
      Click{' '}
      &lt;a
        href={`${state.fileLink}`}
        target=&quot;_blank&quot;
        download=&quot;file.txt&quot;
        rel=&quot;noreferrer&quot;
      &gt;
        here
      &lt;/a&gt;{' '}
      to download your file
    &lt;/p&gt;
  )}
  </code></pre>
  <p>The flow is: The user clicks on a button which sends request to server. The server sends back txt data to the browser. The js then creates a blob from the response data and points the a href to the blob url.</p>
  <p>I can see the response data as well as the blob url.</p>
  <p>However, when the a tag is clicked, I get ERR_FILE_NOT_FOUND. (I have disabled Ad blocker as was suggested in another thread)</p>
  <p>The full error in Chrome is:</p>
  <blockquote>
  <p>Your file couldn’t be accessedIt may have been moved, edited, or deleted.
  ERR_FILE_NOT_FOUND</p>
  </blockquote>
  <p>The error in Firefox is:</p>
  <blockquote>
  <p>Uncaught Error: Access to 'blob:https:..' from script denied</p>
  </blockquote>