fetch() 向服务器发送错误的 URL 请求

Question

我遇到了一个奇怪的问题，使用 fetch() 做一个 POST 请求。这应该很容易，但我一直收到来自服务器的错误代码 405。此外，请求 URL 应该只是“http://localhost:3000/api/teddies/order”，但不知何故本地 Visual_liveserver 不断添加在 URL 请求的前面（本地服务器托管在端口 5500 上：{ {3}})... 在下图中，您可以看到错误代码 405 和这个奇怪的请求 URL。

http://127.0.0.1:5500

通过点击此链接，您将能够访问 Network inspector of the POST method : fetch()。不要犹豫，看看它;) 调用这些函数的文件名为“pageFillingPanier.js”。

但简而言之，请在下面找到包含 fetch 的函数的代码：

const sendPurchaseRequest = async function (dataToSend) {
console.log(dataToSend);
try {
    let response = await fetch('h​ttp://localhost:3000/api/teddies/order', {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(dataToSend) 
    });

    console.log(response.ok); //it shows false...
    
    let responseData = await response.json();
    sessionStorage.setItem('memoryResponse', responseData.orderId);
    //window.location = 'remerciement.html';

} catch (error){
    console.log(error);
}

}

在下面找到调用函数的代码：

document.getElementById('bttFormSend').addEventListener('click', function (e) {
e.preventDefault();
let formPurchaseOrder = {
    contact : {
        firstName : document.getElementById('firstName').value,
        lastName : document.getElementById('lastName').value,
        email : document.getElementById('email').value,
        address : document.getElementById('adress').value,
        city : document.getElementById('city').value},
    products : []
};
for (let index = 0; index < basketToDisplay.length; index++) {
    formPurchaseOrder.products.push(basketToDisplay[index].id);
}

//this function send the POST request to the server
sendPurchaseRequest (formPurchaseOrder);
});

Answer 1

如图所示，网址中存在一个不可见的 unicode 字符。当您从其他地方复制和粘贴网址时，有时会发生这种情况。

%E2%80%8B 为 url 编码形式，​ 未编码。

删除它，浏览器会将其识别为有效网址。

console.log(encodeURIComponent('h​ttp://localhost:3000/api/teddies/order'))

添加 url http://127.0.0.1:5500/ 是因为浏览器没有将提供的 url 检测为有效 url，因此将其视为路径并将您当前的 url 添加到它前面。