title: How to make POST http request with HTTP Basic Auth in react?
body: <p>I am using React (with <code>create-react-app</code>) to crop an image and edit it. When finished, I want it to be compressed using the <a href="https://tinypng.com/developers/reference" rel="nofollow noreferrer">tinyPNG API</a>, which is a wonderful tool and provides great png/jpg compression.</p>
  
  <h2>Goal:</h2>
  
  <p>In my app I have got a <code>data:image/png;base64,iVBORw0KGgoA...</code> image. Within the <a href="https://tinypng.com/developers/reference" rel="nofollow noreferrer">tinyPNG API</a> I see two important steps to make a successful API call:</p>
  
  <ol>
  <li><a href="https://tinypng.com/developers/reference#authentication" rel="nofollow noreferrer">Use HTTP Basic Authentication</a></li>
  </ol>
  
  <blockquote>
    <p>All requests require an Authorization header that contains a Base64 digest of the authentication string <code>api:YOUR_API_KEY</code> where <code>YOUR_API_KEY</code> is the key that can be found on your API account page.</p>
  </blockquote>
  
  <ol start="2">
  <li><a href="https://tinypng.com/developers/reference#compressing-images" rel="nofollow noreferrer">Compress image making a POST request</a> with my Image as [Binary]</li>
  </ol>
  
  <blockquote>
    <p>POST /shrink HTTP/1.1</p>
    
    <p>Host: api.tinify.com</p>
    
    <p>Authorization: Basic YXBpOmFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6MDEyMzQ1</p>
    
    <p>[binary]</p>
  </blockquote>
  
  <p><strong>Side question</strong>: Is my <code>data:image/png;base64,...</code> string already "binary", or do I have to convert it to be binary?</p>
  
  <p>How can I make the requested Http POST request using my image as <code>data:image/png</code>?</p>
  
  <hr>
  
  <h2>My approach:</h2>
  
  <p>To make it easier for myself, I thought using <a href="https://github.com/axios/axios" rel="nofollow noreferrer"><strong>Axios</strong></a>. I have generated my own <code>API_KEY</code> and my <code>data:image/png;base64,...</code> stored as <code>imageSource</code>. Than I have tried to create my API call using Axios:</p>
  
  <pre><code>axios({
    method: 'post',
    url: 'https://api.tinify.com',
    withCredentials: true,
    auth: {
      username: api:MY_API_KEY',
    },
    data: {
      source: {
        url: imageSource, // data:image/png;base64,...
      },
    },
  })
    .then(function(response) {
      console.log(response);
    })
    .catch(function(error) {
      console.error(error);
    });
  </code></pre>
  
  <p>which always gives me an error:</p>
  
  <blockquote>
    <p>Failed to load <a href="https://api.tinify.com/" rel="nofollow noreferrer">https://api.tinify.com/</a>: 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:3000" rel="nofollow noreferrer">http://localhost:3000</a>' is therefore not allowed access. The response had HTTP status code 404.</p>
  </blockquote>
  
  <p>I guess this means, that my HTTP Basic Authentication does not work? If so, what did I do wrong? Its confusing, that tinyPNG does not want a username and/or password, but an <code>api:MY_API_KEY</code>.</p>
  
  <p>Although, how can I send my <code>data:image/png;base64</code>? Can I pass it as a "url" using source (<a href="https://tinypng.com/developers/reference#compressing-images" rel="nofollow noreferrer">second example "Example upload from URL"</a>), or do I have to pass it as Binary (<a href="https://tinypng.com/developers/reference#compressing-images" rel="nofollow noreferrer">first example "Example upload from file"</a>?</p>
  
  <p>I appreciate any help achieving a successful response from the tinyPNG API.</p>
  
  <p>Best regards and thanks for reading about my problem. </p>