我正在尝试从我的 Vue3 客户端（使用
GET
JavaScript HTTP 客户端）向 FastAPI 服务器发出
axios
请求，但我收到
422 unprocessable entity
错误响应。据我了解，这种错误消息与错误的输入有关。
这是 vue3 代码：
import { authToken } from "../main.js"
export default {
...
mounted() {
const response = axios.get('/checkIsLogged', authToken);
console.log("authToken" + authToken)
this.isLoggedIn = response
console.log("isLoggedin", response)
if (response) {
this.title3 = "Mi perfil"
} else {
this.title1 = "Sign in"
}
},
其中“authToken”：
export const authToken = ""
export const setAuthToken = (token) => {
authToken = token
}
另一方面，在 FastAPI 后端中，端点如下所示：
@empresa.get("/checkIsLogged", response_model=bool)
def is_token_expired(authToken: str):
try:
payload = jwt.decode(authToken, SECRET_KEY, algorithms=[ALGORITHM])
expiration_timestamp = payload.get("exp")
if expiration_timestamp is None:
return True
expiration_datetime = datetime.fromtimestamp(expiration_timestamp)
current_datetime = datetime.now()
if current_datetime >= expiration_datetime:
return True
return False
except JWTError:
return False
我做错了什么？
提前致谢。
该问题源于尚未在 GET 请求中正确传递
authToken
至 FastAPI 后端。应在 Axios GET 请求的标头或查询参数中发送
authToken
。
以下是修正后的代码以及一些说明：
1. 通过标头发送
authToken
（推荐）：
```javascript import { authToken } from "../main.js"
export default {
...
mounted() {
axios.get('/checkIsLogged', {
headers: {
'Authorization':
Bearer ${authToken}
}
})
.then(response => {
console.log("authToken:", authToken);
this.isLoggedIn = response.data;
console.log("isLoggedIn:", this.isLoggedIn);
if (this.isLoggedIn) {
this.title3 = "Mi perfil";
} else {
this.title1 = "Sign in";
}
})
.catch(error => {
console.error("Error checking login status:", error);
});
},
}
```
-
我们在 Axios 请求中添加了一个
headers对象，其中包含Authorization标头。 -
Bearer ${authToken}是将authToken作为 Bearer 令牌发送的标准方式。 -
请确保 FastAPI 端点中也处理了
Authorization标头以提取令牌。
2. 通过查询参数发送
authToken
：
```javascript import { authToken } from "../main.js"
export default {
...
mounted() {
axios.get(
/checkIsLogged?authToken=${authToken}
)
.then(response => {
// ... (处理响应的代码与上述相同)
})
.catch(error => {
// ... (错误处理代码与上述相同)
});
},
}
```
-
此方法将
authToken作为查询参数附加到 URL。 -
在的 FastAPI 端点中，需要从查询参数中读取
authToken：python @empresa.get("/checkIsLogged", response_model=bool) def is_token_expired(authToken: str = Query(None)): # 从查询参数获取 authToken # ... (其余代码保持不变)
其他提示：
-
确保
authToken在main.js和的 Vue 组件中都正确设置和更新。 -
使用
console.log语句在的客户端和服务器代码中调试authToken的值。 - 检查的浏览器开发工具中的“网络”选项卡，以查看发送到服务器的请求和从服务器接收到的响应。
通过在 Axios 请求中正确传递
authToken
并确保的 FastAPI 后端能够读取它，应该能够解决 422 错误并成功验证的用户。