Using a variable instead of string with Axios.Get adds a URL on front and causes a 404 error

Question

I am trying to use <div><NewsFeed siteURL={'http://localhost:8080/https://www.forexlive.com/feed'}/></div> to send a (CORS adjusted) URL to this function component in another .js file...

import axios from "axios";
import { useState } from "react";

export default function NewsFeed(siteURL) {
      
  const [items, setItems] = useState([]); 

  const getRss = async () => {
      const stringURL = JSON.stringify(siteURL.siteURL)
      const res = await axios.get(stringURL);      
      const feed = new window.DOMParser().parseFromString(res.data, "text/xml");
      const items = feed.querySelectorAll("item");
      const feedItems = [...items].map((el) => ({             
        link: el.querySelector("link").innerHTML,
        pubDate: el.querySelector("pubDate").innerHTML,
        title: el.querySelector("title").innerHTML,
      }));
      setItems(feedItems);
  }; 
      return (
        <div> 
            <button onClick={getRss}>Refresh the RSS feed</button>      
          {items.map((item) => {
            return (
              <div key ={item.link}>            
                {new Date(item.pubDate).toLocaleDateString('en-AU', { hour: 'numeric', minute: 'numeric', hour12: false })} - {item.title} -
                <a href={item.link}> Link</a>
              </div>
            );
          })}
        </div>
      );
};

The above works if I do const res = await axios.get('http://localhost:8080/https://www.forexlive.com/feed'); but fails if I send the URL as a string variable as per the code above.

When sending the URL as a variable it produces the below in the browser inspector, and has tagged on the React URL (http://localhost:3000/) to the front, and so I get a 404 error.

GET http://localhost:3000/"http://localhost:8080/https://www.forexlive.com/feed"

I have tried stringifying the variable as you can see, but it still does it. I have also tried Axios.get using param as per its documentation but nothing seems to work when it's a variable. I don't have any proxy set in package.json and I use CORS anywhere locally to bypass CORS issues with the http://localhost:8080/ appendage.

yet doing console.log('stringURL:', stringURL); with the failing code shows it to be correct stringURL: "http://localhost:8080/https://www.forexlive.com/feed"

Why not simply <NewsFeed siteURL="http://localhost:8080/https://www.forexlive.com/feed" />? Why wrap the prop value in {'...'}? — Phil
– Phil, Commented Jul 25, 2022 at 6:31
@Phil I'd been trying a bunch of things and this is where I got so far to pass a string. If I send that it works the same by passing an object that I then need to stringify still. Either way I still end up with the same problem. — mdkb
– mdkb, Commented Jul 25, 2022 at 6:34

Phil · Accepted Answer · 2022-07-25 06:36:01Z

1

The issue is this line...

const stringURL = JSON.stringify(siteURL.siteURL)

When you stringify a string, it gets wrapped in literal double-quotes, eg

console.log('foo' + JSON.stringify('bar')); // foo"bar"

You can simplify all this somewhat by using this to render your component

<NewsFeed siteURL="http://localhost:8080/https://www.forexlive.com/feed" />

and this in your component definition

import axios from "axios";
import { useState } from "react";

export default function NewsFeed({ siteURL }) {
  const [items, setItems] = useState([]);

  const getRss = async () => {
    const { data } = await axios.get(siteURL);
    const feed = new window.DOMParser().parseFromString(data, "text/xml");
    // etc

answered Jul 25, 2022 at 6:36

Phil

166k25 gold badges265 silver badges269 bronze badges

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

1 Comment

mdkb Over a year ago

thank you. I had not noticed the additional quotes when stringifying the object that arrived at the function. I had tried using NewsFeed({ siteURL }) at one point and dismissed it as it did not work, but it must have been when I was doing something else with the parsed string. this has solved it for me.

Collectives™ on Stack Overflow

Using a variable instead of string with Axios.Get adds a URL on front and causes a 404 error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related