我想在用戶登錄后發送帶有上傳資料的 JWT。要獲取它，我首先需要使用登錄表單。當我單擊 loginButton 時，函式 login() 被呼叫以使用 formdata 發出 post 請求并等待回應以檢索 JWT，但是在 login-function 的控制臺中顯示了一個指示 CORS-Header 丟失的錯誤“const json = await data.json();”。但是，我能夠在開發人員控制臺中看到令牌。
然后在使用上傳表單時，需要將 JWT 作為 authorauation 標頭以上傳的影像作為正文發送。我想用普通的 javascript 來完成這個。這是我到目前為止：
<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)
});
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);
function convert_to_pdf(event){
event.preventDefault();
const res = await fetch("http://localhost:8000/api/convert_to_pdf", {
method: "POST",
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': ' Bearer ' localStorage.getItem("token")
},
body: new FormData(this)
});
}
</script>
uj5u.com熱心網友回復：
從我所看到的（不是那么多）我可以說使用 JWT 進行身份驗證的程序應該是：
- 使用令牌負載中所需的資料發送 POST 請求
- 在服務器中創建令牌
- 發回令牌（應該是單個字串，檢查它）
現在您可以訪問客戶端的令牌，您可以將其保存在本地或會話存盤（localStorage或sessionStorage）中。
另一種選擇是通過 cookie 在每個請求上發送令牌。這真的取決于你。
編輯：一旦您從登錄請求中取回令牌并將其保存在存盤中，您就可以從客戶端代碼的任何位置使用它，但是通過更新表單將其發送到服務器的唯一方法（使用隱藏輸入除外） ) 將是，在腳本中：
document.querySelector('#uploadform').addEventListener('submit', e => {
// here you can access and manage your form value and also of course access the token value
// to send it to client you can use something like axios so you would do
e.preventDefault(); // that prevent the form to send its request
// now send you request manually with your data for e.g.
axios.post('http://localhost:8000/api/convert_to_pdf', /* your data here */)
})
uj5u.com熱心網友回復：
通過 POST 提交表單的默認瀏覽器操作是呈現回應內容。如果這不是您想要的行為，您將不得不手動執行來自 JS 的請求，例如使用onsubmit屬性。
我在Mozilla 開發者網站上找到了關于它的教程。
此外，您還必須將 JWT存盤在某個地方，可能是local-storage，當讀回它并將其添加到Authorization下一個請求的標頭時，也是通過 JS 完成的，而不是標準瀏覽器提交。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/346241.html
標籤：javascript html 形式 邮政 jwt