fetch 从哪里获取它的端点值？答案

【问题标题】：Where is fetch getting it's endpoint value from?fetch 从哪里获取它的端点值？
【发布时间】：2021-10-13 04:26:38
【问题描述】：

我有以下代码，我正在使用 React：

// post-post
const queryDatabase = (obj, endpoint) => {
    console.log(obj);

    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(obj)
    };

    console.log(endpoint);
    fetch(endpoint, requestOptions)
        .then(data => {return Promise.resolve(data)}
    );
}

export {queryDatabase};

出于某种原因，console.log(endpoint) 打印了我传入的端点，例如"/users"、"/profile" 等。但是，fetch 正在尝试发送到 http://localhost:3000/users，所以当我尝试手动传递端点时，我收到关于尝试发布到 http://localhost/http://localhost/users 的错误。

fetch 在哪里得到这个默认的http://localhost:3000 值？

仅对POST 请求执行此操作。

唯一的环境变量如下：

REACT_APP_AUTH0_REDIRECT_URI=http://localhost:3000
REACT_API_SERVER_URL=http://api.localhost
PORT=3000

我还有一些其他的 Auth0 环境变量，是 Auth0 这样做的吗？我已经删除了这些变量进行测试，但仍然没有。

【问题讨论】：

您需要在endpoint 传递给fetch 之前查看它的值。如果它确实以单个正斜杠开头，则 URL 是相对于文档的基础的。默认文档库是由权限后跟的方案组成的来源，在您的情况下为http://localhost:3000，可能（尽管这实际上需要验证）。 fetch 和任何其他机制都不会自动将 /users 变成类似 http://localhost/http://localhost:3000/users 的东西，所以这与 fetch 无关，真的。查看您的文档中是否有 base 元素。
不，你是对的，但我已经删除了这些变量，问题仍然存在。是的，我的意思是基本元素或没有 fetch 正在执行此操作或正在发生类似的事情。如果这是受基本元素影响的情况，则需要在文档中突出显示。
它在fetch.spec.whatwg.org/#main-fetch 几乎被指定为t。我非常理解你的沮丧，相信我，我自己去过很多次，每次新技术都在同一个地方，但我学到了一件重要的事情——不要去 Stack Overflow 和互联网学习上的随机博客比如说fetch。找到权威的文档源并尝试从那里调试您的方式。当然，这需要更多时间，但你不能说它不够明确。如果不一致/模棱两可，然后向 WHATWG/Google/Mozilla/etc 提交错误。

标签： fetch auth0

【解决方案1】：

答案是使用 Request 对象并将其传递给 fetch：

const requestOptions = new Request(serverUrl + endpoint, {
    method: 'POST',
    body: JSON.stringify(obj),
    headers: new Headers({
        'Content-Type': 'application/json'
    })
});

为什么要麻烦...使用 axios 或其他东西，fetch 很烂。

编辑：

显然 fetch 没有问题。不管是什么情况，这都是解决办法。

【讨论】：

这是一个糟糕的答案，但真正的悲剧是它可能会导致其他人误入歧途，因为他们会认为这是有道理的。事实是——文档可以这么说——你说的代码是答案和你在问题中拥有的代码之间不应该也没有任何区别。使用Request 的能力很方便，它不会改变URL 解析语义。自从几年前在 Firefox 和 Chrome 中实现以来，我一直在使用 fetch。你的错在别处。
真正的悲剧是这不应该是一个问题。如果这是修复，那么它就是修复。