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

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"

CodePudding user response：

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