[strapi]getFetchClient 的端点 api 调用不正确

@simotae14 你能看一下吗？ ？

是的

与我和@simotae14 一起测试图像

看起来对我们来说效果很好

这是一条模板消息

你好@AlcaYezzz，

感谢您报告此错误，但是根据我们现有的信息，我们无法重现您所描述的问题。您能否创建一个能够在其中重现该问题的新项目，提供重现此问题的明确步骤，并将此新项目上传到新的 GitHub 存储库，或者将其压缩为.zip并上传到此问题？

我们非常感谢您对此的帮助，通过在一个新项目中工作，它将消除任何可能不相关的变量。请注意，status: can not reproduce如果没有任何活动，标记为 的问题将在 14 天内关闭。

谢谢你！

您好@AlcaYezzz，我们尝试与@derrickmehaffy 一起复制该问题，我对您的建议是更改您的 API 调用await get(`api/foo`)，await get('/api/foo')并让我知道它是否有效。再次感谢，西蒙娜

嗨@simotae14，@derrickmehaffy。

在开头加一个/确实可以解决问题。但我觉得这是错误的，因为/生产和开发之间的行为应该是相同的。这是对我的用例的更好解释。

我们的用例如下，我们向内容类型的视图添加一个按钮，该按钮到达内容类型控制器的自定义路由以进行一些生成。

这是一个重现该问题的项目： strapi-useFetchClient-issue.zip

/api/foo/generate当用户单击按钮时，它会向自定义路由发出请求。

只需在 foo 内容类型下创建一个条目

单击按钮启动 Strapi 时yarn develop --watch-admin，请注意以下调用： 在 Strapi 日志中：

在浏览器中：

注意/api/foo/generate这里如何正确调用。

然而，当启动 Strapi 时，yarn build && yarn start行为会发生变化。在 Strapi 日志中：

在浏览器中：

请注意调用/admin/content-manager/collectionType/api/foo/generate

你好@AlcaYezzz，感谢您的更新，我理解您的观点，但我们设计了 useFetchClient 来接受前面带有“/”的 url（或者至少我们以这种方式在内部使用它），我们当然可以将文档更新为警告贡献者并防止此类问题。另外，我可以与我的同事交谈并讨论我们是否要重构 useFetchClient 并承认像您一样的 url。同时我建议您使用我向您建议的解决方案，非常感谢您的考虑，非常感谢，祝周末愉快

我明白了，我对此没有任何问题。我仍然认为useFetchClient应该要么总是在前面加上/admin/content-manager/collectionType，要么从不放在前面。因为以不同的方式执行完全相同的代码确实会令人困惑，因为当前的行为就是这种情况。

不管怎样，谢谢你的支持，祝你周末愉快。

我们在文档中添加了更多信息，以防止将来出现此问题，您可以在此处找到修复的实现https://github.com/strapi/strapi/pull/16013，谢谢

错误报告 所需的系统信息

• Node.js 版本：v18.12.1
• NPM版本：8.19.2
• 斯特拉皮版本：4.6.1
• 数据库：Postgres
• 操作系统： Debian
• 你的项目是Javascript还是Typescript：Typescript

描述错误

开发和生产调用的 api 端点getFetchClient不同

重现行为的步骤

1. 在管理面板中创建一个自定义按钮，并调用服务器getFetchClient
2. 开始背带yarn dev --watch-admin
3. 使用上一个按钮
4. Strapi正确调用api端点
5. 开始背带yarn build && yarn start
6. 使用上一个按钮
7. Strapi/admin/content-manager/collectionType/在 url 前面添加

预期行为

生产和开发之间调用相同的url

截图

如果适用，请添加屏幕截图以帮助解释您的问题。

代码片段

import React from "react";
import { Flex, IconButton } from '@strapi/design-system';
import { stopPropagation } from '@strapi/helper-plugin';
import { FilePdf } from '@strapi/icons';
import { useFetchClient } from '@strapi/helper-plugin';

const CustomButton: React.FunctionComponent<{}> = ({}) => {
  const { get } = useFetchClient();

  const click = async () => {

    await get(`api/foo`)
      .then((response) => {
        console.log(response)
    }).catch((error) => console.log(error));
  }

  return (
    <Flex { ...stopPropagation }>
      <IconButton
        onClick={click}
        label={"Custom button"}
        icon={ <FilePdf style={{width:'50px', height: '50px', fill: 'red'}}/> }
        noBorder/>
    </Flex>)
}

export default CustomButton;

当我在版本 4.7.1 中运行相同的代码时。我的 Strapi 管理面板注销并且路线有 401 代码

{
    "data": null,
    "error": {
        "status": 401,
        "name": "UnauthorizedError",
        "message": "Missing or invalid credentials",
        "details": {}
    }
}

您好@WardenCommander，您能否给我提供与“所需系统信息”相关的更多详细信息以尝试您的配置？

你好@simotae14，确定我的配置是： Node.js 版本：v18.12.1 NPM 版本：8.19.3 Strapi 版本：4.7.1 数据库：Postgres 操作系统：Win10 您的项目是 Javascript 还是 Typescript：Typescript

我试图在 Strapi 管理中获取本机路由以拥有自定义页面。编辑：我可以发现的是 Strapi 注入不记名令牌，并且该令牌没有获取数据的授权

嘿@WardenCommander 我的第一个建议是使用这种格式作为您的 requestURL 路径/{yourRelativePath}

同时我尝试复制你的问题

@simotae14这是我正在使用的确切代码，正如你所看到的路径是相对的：

这是来自 Crome Network 选项卡：

这与本地设置中 Postman 的设置相同：

嘿@WardenCommander 对于迟到的回复感到抱歉，对我来说， getFetchClient 或 useFetchClient 似乎没有问题，因为在邮递员中，您在调用 API 时也遇到问题。最有可能的是身份验证问题，我认为您需要 API 令牌或用户权限插件 JWT。它不依赖于这个问题或钩子，如果您需要更多帮助，最好打开另一个与钩子无关的问题，谢谢