使用变量调用Axios.Get时URL被拼接前缀致404错误

我尝试通过 <div><NewsFeed siteURL={'http://localhost:8080/https://www.forexlive.com/feed'}/></div> 将经过CORS调整的URL传递给函数组件，但请求一直失败。组件代码如下：

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>
      );
};

问题现象 #

直接把URL写死成 const res = await axios.get('http://localhost:8080/https://www.forexlive.com/feed'); 代码能正常运行，但用变量传递URL就报错。浏览器控制台显示请求地址变成了 GET http://localhost:3000/"http://localhost:8080/https://www.forexlive.com/feed"，自动加上了React本地开发的URL前缀，结果返回404错误。

已尝试的操作 #

• 对变量执行JSON.stringify处理，问题依旧存在
• 按照Axios文档尝试使用param参数，无效
• 未在package.json中设置代理，通过本地CORS anywhere工具解决跨域问题
• 打印stringURL显示变量值正确，但请求地址仍异常

问题出在两个细节上：

1. 组件参数接收方式错误 #

函数组件接收的是整个props对象，你写NewsFeed(siteURL)时，siteURL其实是完整的props对象，并非你传入的siteURL属性。正确做法是通过解构props直接获取目标属性。

2. 多余的JSON.stringify处理 #

你把已经是字符串类型的URL又转成了JSON格式，导致URL被包裹在双引号里。Axios会将带引号的字符串识别为相对路径，自动拼接本地开发服务器地址，这就是404错误的根源。

修正后的完整代码：

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

// 解构props，直接获取传入的siteURL属性
export default function NewsFeed({ siteURL }) {
      
  const [items, setItems] = useState([]); 

  const getRss = async () => {
      // 去掉多余的JSON.stringify，直接使用siteURL
      const res = await axios.get(siteURL);      
      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>
      );
};

关键修正说明 #

• 参数解构：将function NewsFeed(siteURL)改为function NewsFeed({ siteURL })，直接从props里解构出siteURL，无需再通过siteURL.siteURL访问，避免逻辑混淆。
• 移除JSON.stringify：传入的siteURL本身就是合法的字符串URL，转成JSON后会额外添加双引号，导致Axios识别错误，去掉该处理即可恢复正常请求。

内容的提问来源于stack exchange，提问作者mdkb