当我使用不记名令牌发送请求时，服务器返回状态 403 禁止答案

【问题标题】：Server returns status 403 forbidden when i send request with bearer token当我使用不记名令牌发送请求时，服务器返回状态 403 禁止
【发布时间】：2021-09-17 23:34:06
【问题描述】：

我正在处理安全问题，并且有一个绑定到 jwt 的任务。当我收到 jwt 并已将其保存在 LocalStorage 中时，我试图向服务器发送请求并将此 jwt 放入标头中：授权：“承载”+ jwt，但服务器仅返回状态 403 禁止。我想，原因是在请求之前发送令牌被放入标头，但我试图人为地放置这个令牌，服务器也返回 403，在邮递员中一切正常

这是我的 axios 实例

 const TOKEN_STRING = localStorage.getItem("jwt") || ""
    
    export const axiosInstance = axios.create({
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: "Bearer " + TOKEN_STRING,
      },
    })

这就是我在登录页面中保存令牌的方式

 const submit = async () => {
    try {
      await axios
        .post(baseUrl + "/api/login", loginData)
        .then((res) => localStorage.setItem("jwt", res.data.jwt))
    } catch (e) {
      setError(e.message)
    }
  }

这就是我在登录页面之后发送请求的方式，我认为应该在 localStorage 收到令牌之后

const fetchData = async () => {
    try {
      await axiosInstance
        .get(process.env.REACT_APP_BASE_BACKEND_URL + "/api/discounts")
        .then((response) =>
          setDiscounts(() =>
            response.data.map((el, index) => ({
              ...el,
              img: cardImages[index],
            }))
          )
        )
    } catch (e) {
      setDiscountsFetchError(e.message)
    }
  }
  useEffect(() => {
    fetchData()
  }, [])

我认为这已经足够了，但如果 smbd 需要更多信息，我会提供

【问题讨论】：

403 禁止通常意味着，即使请求可以通过有效用户进行身份验证，也不允许经过身份验证的用户访问该资源。如果用户无法通过身份验证，服务器通常会以 401 未授权响应。
但是为什么在邮递员中使用相同的令牌？
此外，您是在登录之前还是之后创建axiosInstance？
登录后，登录页面使用常用的axios
在浏览器的开发者工具中检查请求是否包含正确的token。另请在 Postman 中显示工作请求（例如作为 cURL 导出）

标签： javascript reactjs axios

【解决方案1】：

我认为您在登录调用之前创建了 axios 实例，因此当时 jwt 为空。

当 jwt 存在于本地存储中时，在登录调用后在您的获取数据请求中尝试以下操作。

axiosInstance
.get(
process.env.REACT_APP_BASE_BACKEND_URL + "/api/discounts", 
{
 headers: {
   Accept: "application/json",
   "Content-Type": "application/json"
   Authorization: 'Bearer ' + localStorage.getItem("jwt")
 }
})

【讨论】：

您能否使用 cURL 并检查 derpirscher 评论中提到的邮递员令牌的有效性