带登录认证的API GET请求调用失败求助

你的代码存在几个关键问题导致API请求失败，以下是具体问题和修复后的代码：

核心问题 #

1. 未发起实际请求：myFunction里仅定义了请求配置项，但没有调用请求方法（比如jQuery的$.ajax()），相当于只写了参数却没执行函数。
2. 语法错误：contentType: 'application/json'末尾缺少逗号，会触发JavaScript语法报错，导致函数无法正常执行。
3. 不必要的配置：GET请求不需要设置contentType（该字段用于标识请求体格式，GET请求无请求体）。
4. HTML结构错误：<td>标签必须嵌套在<tr>和<table>中，否则会导致页面结构异常。

修复后的代码（使用jQuery） #

如果你的项目引入了jQuery，使用以下代码：

<html>
    <head>
        <title>Curriculum</title>
        <link rel="stylesheet" href="style.css">
        <!-- 先引入jQuery库 -->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script type="text/javascript">
function myFunction() {
    // 用$.ajax包裹配置，发起实际请求
    $.ajax({
       url: 'https://www.fulek.com/data/api/supit/curriculum-list/hr',
       type: 'GET',
       headers: {
          'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MjMxMjUwLCJleHAiOjE2NzQyMzQ4NTAsImlhdCI6MTY3NDIzMTI1MH0.2HOTHD3kmxFg1PH0UTD7yv7dGv-kM1j2OJsdfgCZ254'
       },
       success: function (result) {
           console.log(result);
           alert('请求成功，可查看控制台输出');
       },
       error: function (error) {
           console.error('请求失败:', error);
           alert('请求失败，可查看控制台详情');
       }
    });
}
        </script>
    </head>
    <body>
        <!-- 修复HTML结构 -->
        <table>
            <tr>
                <td><button type="button" onclick="myFunction()">获取课程列表</button></td>
            </tr>
        </table>
    </body>
</html>

修复后的代码（原生JavaScript，无需jQuery） #

如果不想依赖jQuery，使用原生fetch方法：

<html>
    <head>
        <title>Curriculum</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript">
async function myFunction() {
    try {
        const response = await fetch('https://www.fulek.com/data/api/supit/curriculum-list/hr', {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MjMxMjUwLCJleHAiOjE2NzQyMzQ4NTAsImlhdCI6MTY3NDIzMTI1MH0.2HOTHD3kmxFg1PH0UTD7yv7dGv-kM1j2OJsdfgCZ254'
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP错误状态码: ${response.status}`);
        }

        const result = await response.json();
        console.log(result);
        alert('请求成功，可查看控制台输出');
    } catch (error) {
        console.error('请求失败:', error);
        alert('请求失败，可查看控制台详情');
    }
}
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td><button type="button" onclick="myFunction()">获取课程列表</button></td>
            </tr>
        </table>
    </body>
</html>

验证步骤 #

1. 打开浏览器开发者工具（按F12），切换到**控制台(Console)**标签。
2. 点击按钮发起请求，查看控制台输出：
   • 成功时会打印返回的API数据。
   • 失败时会打印错误详情，可根据信息进一步排查（比如token过期、跨域问题等）。

内容的提问来源于stack exchange，提问作者repinSlun