title: Error when uploading to S3 bucket using Presigned URL
body: <p>I followed <a href="https://www.youtube.com/watch?v=mw_-0iCVpUc&amp;list=FLaQJkiB5-QM-bvoQwTFxxnA&amp;index=1&amp;ab_channel=AmazonWebServices" rel="nofollow noreferrer">this AWS tutorial</a> to create a bucket and a Lambda function that makes a request for a Presigned URL from S3. I also created an IAM role that has read/write permissions. I then created an API Gateway so I can call an endpoint. I then followed <a href="https://medium.com/@kevinwu/client-side-file-upload-to-s3-using-axios-c9363ec7b530" rel="nofollow noreferrer">this</a> tutorial to create a quick front-end in React. Its a simple drag/drop application that uses my API endpoint to get the Presigned URL. This is what my React component looks like:</p>
  <pre><code>import React, { useCallback } from &quot;react&quot;;
  import { useDropzone } from &quot;react-dropzone&quot;;
  import axios from &quot;axios&quot;;
  import { API_ENDPOINT } from &quot;./aws_config&quot;;
  
  export function Test3() {
    const onDrop = useCallback((acceptedFiles) =&gt; {
      var file = acceptedFiles[0];
  
      axios
        .get(API_ENDPOINT, {
          filename: file.name,
          filetype: file.type,
        })
        .then(function (result) {
          var signedUrl = result.data.signedUrl;
  
          var options = {
            headers: {
              &quot;Content-Type&quot;: file.type,
            },
          };
  
          return axios.put(signedUrl, file, options);
        })
        .then(function (result) {
          console.log(result);
        })
        .catch(function (err) {
          console.log(err);
        });
    }, []);
  
    const { getRootProps, getInputProps } = useDropzone({ onDrop });
  
    return (
      &lt;div
        {...getRootProps()}
        style={{ width: &quot;400px&quot;, height: &quot;300px&quot;, background: &quot;#DDDDDD&quot; }}
      &gt;
        &lt;input {...getInputProps()} /&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>When I try to upload a file however, I get this error:</p>
  <pre><code>TypeError: Cannot read property 'protocol' of undefined
      at isURLSameOrigin (isURLSameOrigin.js:57)
      at dispatchXhrRequest (xhr.js:108)
      at new Promise (&lt;anonymous&gt;)
      at xhrAdapter (xhr.js:13)
      at dispatchRequest (dispatchRequest.js:52)
  </code></pre>
  <p>I'm not sure what's wrong or how to even start considering I'm completely new to all this. The Lambda function is set up to only accept .JPG images which is what I uploaded. The file is only 15KB too so I don't think its the file that's the issue. Does anyone know what the issue could be?</p>