補充一下好了，原本以為有人會提的

瀏覽器可以多利用開發者工具（按F12>網路）看一下自己到底發送了什麼東西出去

以下是幾乎沒動原本程式
只是把 jquery 跟 axios 分別做成不同的測試函式
（這邊沒有幫忙除錯，只是在說明要怎麼檢查錯誤）

html 部分

<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.6/axios.js"></script>
<script src="index.js"></script>

index.js

const apiUrl = "http://localhost";
const apiKey = "The APIkey";
const longUrl = "https://github.com/asd8116/URL-shortener";

function test_JQuery() {
    const requestBody = {
        url: longUrl,
    };

    const config = {
        headers: {
            "Content-Type": "application/json",
            "reurl-api-key": apiKey,
        },
    };

    $.post(apiUrl, JSON.stringify(requestBody), config)
        .done((response) => {
            const { res, msg, short_url } = response;
            if (res === "success") {
                console.log(`縮網址：${short_url}`);
            } else {
                console.log(`縮網址 API 回傳錯誤：${msg}`);
            }
        })
        .fail((jqXHR, textStatus, errorThrown) => {
            console.log(`錯誤：${errorThrown}`);
        });
}

function testAxios() {
    const requestBody = {
        url: longUrl,
    };

    const config = {
        headers: {
            "Content-Type": "application/json",
            "reurl-api-key": apiKey,
        },
    };

    axios
        .post(apiUrl, requestBody, config)
        .then((response) => {
            const { res, msg, short_url } = response.data;
            if (res === "success") {
                console.log(`縮網址：${short_url}`);
            } else {
                console.error(`縮網址 API 回傳錯誤：${msg}`);
            }
        })
        .catch((error) => {
            console.error(`錯誤：${error}`);
        })
        .finally(() => {
            //rl.close();
        });
}

document.addEventListener('DOMContentLoaded', ()=>{
    // 產生按鈕觸發測試
    [test_JQuery, testAxios].forEach(func=>{
        let btn = document.createElement('button');
        btn.textContent = func.name;
        btn.addEventListener('click', func);
        document.body.appendChild(btn);
    });
});

產生的結果如下
（注意：開發者工具中，通常會有個選項可以切換成看原始的格式）

使用 Axios 時

Header

Content-Type: application/json

Body

{"url":"https://github.com/asd8116/URL-shortener"}

使用 jQuery

Header

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

Body

{"url":"https://github.com/asd8116/URL-shortener"}:	""

如果把 JSON.stringfy 拿掉，Body 會變成

url=https%3A%2F%2Fgithub.com%2Fasd8116%2FURL-shortener

結論

1. 網頁發送訊息遇到問題時，可以用開發者工具看一下發送的內容是不是跟自己想的一樣。
2. Axois 跟 jQuery 是不同的軟體，在參數的設計上幾乎不大可能一樣，不能直接套。使用這些軟體最好去看一下他們各自的說明文件。
3. 有空的話建議了解一下不同的格式，以及 Header 與 Body 之間的關係。

測試 前端用axios
再打一次API看看
失敗了就符合你的結論了

假如axios 可以過的話
那可能就是jqeury post 語法要調整這樣

403 - Forbidden A 403 status code indicates that the client cannot access the requested resource. That might mean that the wrong username and password were sent in the request, or that the permissions on the server do not allow what was being asked.

通常可能是infra範疇建議這個可以先嘗試確認
1.權限問題：您可能未經授權訪問該頁面或資源。請檢查您的使用者權限，以確保您有權訪問此資源。您可以檢查您的使用者帳戶是否有足夠的權限，或者您是否必須通過驗證。

2.IP被阻擋：您的IP地址可能被阻擋，這可能是由於違反網站的規則或防火牆設置所導致。您可以嘗試使用另一個網路連線或與網站的管理員聯繫以解決此問題。

3.代理伺服器設定問題：如果您使用代理伺服器連線，則可能會出現403錯誤。請檢查您的代理伺服器設定，以確保它們正確。

常見status code分類
https://coolmandiary.blogspot.com/2021/12/aspnet-webapi2003mvcwebapipostmanhttpve.html