const response = await axios({
  ...
})

if (response && response.status == 200) {
   const url = window.URL.createObjectURL(
      new Blob([response.data], { type: 'text/plain' }),
   )
}
setState({
  ...state,
  fileLink: url,
})

JSX

{state.fileLink && (
  <p>
    Click{' '}
    <a
      href={`${state.fileLink}`}
      target="_blank"
      download="file.txt"
      rel="noreferrer"
    >
      here
    </a>{' '}
    to download your file
  </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.

I can see the response data as well as the blob url.

However, when the a tag is clicked, I get ERR_FILE_NOT_FOUND. (I have disabled Ad blocker as was suggested in another thread)

The full error in Chrome is:

Your file couldn’t be accessedIt may have been moved, edited, or deleted. ERR_FILE_NOT_FOUND

The error in Firefox is:

Uncaught Error: Access to 'blob:https:..' from script denied