如何存储POST响应返回的JWT并在HTML表单提交时携带，使用纯JS实现

问题原因及修复方案 #

1. CORS报错问题解决 #

你遇到的缺少CORS-Header报错是浏览器同源策略的限制：请求已经成功发送到后端且后端返回了Token，但是浏览器因为后端没有返回正确的CORS响应头，禁止前端JS读取响应内容，所以调用data.json()时会报错。
修复需要在后端服务配置CORS规则：

• 添加Access-Control-Allow-Origin响应头，值为你前端页面的访问地址（开发阶段可临时设为*）
• 同时添加Access-Control-Allow-Headers响应头，允许Authorization、Content-Type等自定义请求头
• 如果涉及非简单请求，还要配置Access-Control-Allow-Methods允许POST等请求方法

2. 前端代码错误修复 #

现有代码存在3处错误，修正点如下：

• convert_to_pdf函数没有加async关键字，直接使用await会抛出语法错误
• 上传请求手动设置了Content-Type: multipart/form-data，使用FormData时浏览器会自动携带该头并补充正确的boundary分隔符，手动设置会丢失boundary导致后端无法解析表单
• Authorization头的Bearer前缀前多了多余空格，标准格式应为Bearer <token>

修正后完整代码 #

<form id="loginform">
    <input type="text" id="username" name="username" placeholder="Username">
    <input type="password" id="password" name="password" placeholder="Password">
    <input id="loginButton" type="submit">
</form>
    
<form id="uploadform" enctype="multipart/form-data">
    <input type="file" id="images" name="images" multiple data-max="5" accept="image/jpg, image/jpeg, image/png" >
    <input id="sendImagesButton" type="submit">
</form>

<script type="text/javascript">
    const loginform = document.getElementById("loginform");
    loginform.addEventListener('submit', login);
    async function login(event){
        event.preventDefault();
        const data = await fetch("http://localhost:8000/api/login", {
            method: "POST",
            body: new FormData(this)
        });
        // 建议增加响应状态判断，避免异常报错
        if (!data.ok) {
            throw new Error('登录请求失败')
        }
        const json = await data.json();
        alert("test jwt retrieved");
        localStorage.setItem("token", json.access_token);
    }
    const pdfform = document.getElementById("uploadform");
    pdfform.addEventListener('submit', convert_to_pdf);
    // 补充async关键字
    async function convert_to_pdf(event){
        event.preventDefault();
        const res = await fetch("http://localhost:8000/api/convert_to_pdf", {
            method: "POST",
            headers: {
                // 删除手动设置的Content-Type，交由浏览器自动生成
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            },
            body: new FormData(this)
        });
        // 可自行补充后续响应处理逻辑
    }
</script>

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