React 请求 URL 会自行更改，具体取决于调用的位置。 （axios 和 fetch 都有）

Posted 2023-03-27

【中文标题】React 请求 URL 会自行更改，具体取决于调用的位置。 （axios 和 fetch 都有）

【英文标题】：React request URL changes itself, depending on the location of the call. (Both axios and fetch)

【发布时间】：2021-05-31 15:06:35

【问题描述】：

我一如既往地在 React 组件中发送 Axios 请求，并且成功了。

服务器 > 路由 > product.js

router.post("/removeImages", auth, (req, res) => 

    req.body.images.map(imgPath => 
        fs.unlink(imgPath, (err)=>
            if(err)
                console.log(err);
            
            console.log('Image removed successfully');
        );
    );

);

客户端 > src > 组件 > FileUpload.js

import Axios from 'axios';
function FileUpload(props) 
  ...
  Axios.post('api/product/removeImages',  images: Images );

所以，我复制了这行(Axios.post('api/product/removeImages', images: Images );) 并在子组件中使用它。然后，出现以下错误：

POST http://localhost:3000/product/api/product/removeImages 404（未找到）

我还以为是Axios的bug，所以改成fetch()，结果还是一样（404 Not Found）。我不知道硬编码的 URL 如何根据组件而改变。也许这是一个 React 错误？

【问题讨论】：

您需要提供更多详细信息。

你在哪里为 axios 定义你的基本 URL？发布该代码。

【参考方案1】：

您的网址中似乎缺少起始 /。当不以 / 开头的 url 时，它将相对于您当前的路径。 这意味着如果您当前位于 localhost:3000/products 中，则对相对路径 api/products/removeImages 的任何请求都将解析为 localhost:3000/products/api/products/removeImages

以 / 开头的 /api/products/removeImages 调用仅与基本 url 相关，在本例中为 localhost:3000，而不是当前路径，因此导致 locahost:3000/api/products/removeImages。

tl;dr：在您的网址中添加前缀 / 以解决您的相对路径问题。

此外，正如 @ataravati 在 cmets 中提到的，最佳实践是也为 axios 设置一个 baseURL。