Axios 获取请求不会正确的 URL答案

【问题标题】：Axios Get Request not going to Correct URLAxios 获取请求不会正确的 URL
【发布时间】：2021-12-03 19:40:33
【问题描述】：

我将代理设置为 http://localhost:8000/api （适用于其他请求）

在反应中，我正在使用 axios 进行获取请求：

const res = username 
            ? await axios.get("posts/profile/"+username)
            : await axios.get("posts/timeline/6120b0e07ea0361eb4982b1c");

当未定义用户名时，第二个条件有效，但当提供用户名时，第一个条件将请求发送到另一个 url：在运行后端的 VSCode 终端中，这是可见的：

::ffff:127.0.0.1 - - [15/Oct/2021:15:38:12 +0000] "GET /api/profile/posts/profile/matt HTTP/1.1" 404 169

它应该转到 /api/posts/profile/matt 但它却转到上面的那个

在 chrome 控制台中：

xhr.js:210 GET http://localhost:3000/profile/posts/profile/matt 404 (Not Found)

在 POSTMAN 中，api 有效。当我使用完整的 URL 时：

const res = username 
            ? await axios.get("http://localhost:8000/posts/profile/"+username)
            : await axios.get("posts/timeline/6120b0e07ea0361eb4982b1c");

使用完整 url 后，应用程序可以正常工作，但是在没有完整 URL 的情况下它应该可以正常工作，因为我已经设置了代理，并且对于其他 get 请求也可以正常工作，即使没有完整 url 的时间线也可以正常工作。

这是反应路由的代码：

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/register">
          <Register />
        </Route>
        <Route path="/profile/:username">
          <Profile />
        </Route>
      </Switch>
    </Router>
  )
}

这里是 API（使用正确的 URL 时可以正常工作）：

//GET TIMELINE POSTS
router.get("/timeline/:userId", async (req, res) => {

    try {
        const currentUser = await User.findById(req.params.userId);
        const userPosts = await Post.find({ userId: currentUser._id });
        
        const friendPosts = await Promise.all(
            currentUser.following.map( friendId => {
                return Post.find({ userId: friendId });
            })
        );

        res.status(200).json(userPosts.concat(...friendPosts));

    } catch( err ) {
        res.status(500).json(err);
    }

});

//GET User's all POSTS
router.get("/profile/:username", async (req, res) => {

    try {
        
        const user = await User.findOne({username: req.params.username});
        const posts = await Post.find({userId: user._id});
        
        res.status(200).json(posts);
        
    } catch( err ) {
        res.status(500).json(err);
    }

});

这可能是什么问题？问题仅发生在配置文件请求（将请求发送到错误的 url）

【问题讨论】：

/api 路径在哪里发挥作用？您是否在服务器上使用反向代理？您在哪条路线上为前端提供服务？
代理是：localhost:8000/api，除了配置文件一之外的所有请求都可以正常工作，请参考这个问题：stackoverflow.com/questions/69592894/…

标签： reactjs express axios react-router

【解决方案1】：

您的相对 URL 的解析方式与您想象的不同。您可以对此进行调试，但我建议您只使用绝对 URL 以确保您知道它们是如何解析的：

const res = username 
  ? await axios.get("/api/posts/profile/"+username)
  : await axios.get("/api/posts/timeline/6120b0e07ea0361eb4982b1c");

【讨论】：

当我在 /posts 之前添加 /api 时，时间线请求也停止工作并将请求发送到 /api/api/posts/timeline/6120b0e07ea0361eb4982b1c，所有请求除了 profile 一项不使用绝对 URL 的工作，即“http:localhost:8000/api/posts/profile/matt”

【解决方案2】：

在帖子生效之前添加一个斜线：

await axios.get("/posts/profile/"+username)

【讨论】：

【解决方案3】：

除了其他解决方案之外，您还可以使用记号 ( ` ) 来执行以下操作：

await axios.get(`/posts/profile/${username}`);

【讨论】：