Axios request adding URL variable to localhost URL

Question

I have a GET request Axios:

const fetchData = () => {
        axios( {
            method: "GET",
            url: inputData.cUrl,
            headers: { "content-type": "text/html" }
        } ).then( ( response ) => {
            const parser = new DOMParser();
            const doc = parser.parseFromString( response, "text/html" );
            console.log( doc );
        } ).catch( e => console.log( e ) );
    };

However, if inputData.cUrl is "www.google.com", the request will fail with the error message of

"GET http://localhost:3000/www.google.com 400 (Header required)".

2 questions.

Why does it append the url to the end of my localhost url? I want the get request to only go to the url the user puts in, not appended to my localhost.

And what does (Header required) mean? Never seen this with axios before.

Thank you for your help!

"Why does it append the url to the end of my localhost url?" - because you used a relative URL, instead of a proper absolute one. — 04FS
– 04FS, Commented Nov 24, 2019 at 12:30
@04FS How do I make it absolute in the axios request? The only thing I have in the url property in the request is the url I want — Cevin Thomas
– Cevin Thomas, Commented Nov 24, 2019 at 12:31
Well then you will have to modify the value to add what is missing. (And probably check first, if it is really missing - if the user input it already, that would error out in the other direction otherwise.) — 04FS
– 04FS, Commented Nov 24, 2019 at 12:32
Even if i hardcode the value to be "www.google.com" it still goes to "localhost/www.google.com" — Cevin Thomas
– Cevin Thomas, Commented Nov 24, 2019 at 12:34
Yes, it was just for testing. I fixed it now, adding the correct protocol in the beginning of the URL. Thank you for your guidance! — Cevin Thomas
– Cevin Thomas, Commented Nov 24, 2019 at 12:36

Ayyub Kolsawala · Accepted Answer · 2019-11-24 12:40:34Z

2

You need to add the http protocol in front of the URL. Here you go.

const inputData = {};
inputData.cUrl = 'https://www.google.com';
const fetchData = () => {
  axios({
      method: 'GET',
      url: inputData.cUrl,
      headers: {
        'content-type': 'text/html'
      }
    })
    .then(response => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(response, 'text/html');
      console.log(doc);
    })

    .catch(e => console.log(e));
};

you can ignore this because the Request was going to your server instead of 'www.google.com'

answered Nov 24, 2019 at 12:40

Ayyub Kolsawala

8598 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Axios request adding URL variable to localhost URL

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related