Question

我是React的新手。尝试发出“获取”请求并禁止403错误，“预检响应没有HTTP正常状态。”。在“请求方法”而不是“获取方法”的“网络”选项卡中，方法显示“选项”。可能是什么问题呢？ COR已打开，令牌问题

let token = localStorage.getItem("token")
axios
  .get("http://dev.*****************get-template", {
    headers: {
      Authorization: `Bearer + ${token}`,
    },
  })
  .then(res => {
      console.log("Success")
  })
  .catch(error => {
    console.log(error)
  })

这就是我保存令牌的方式。可能是我没有正确将其保存在localStorage中吗？但是当console.log显示正常时

 event.preventDefault()
    const formdata = new FormData()
    formdata.append("username", this.state.userLogin.email)
    formdata.append("password", this.state.userLogin.password)
    axios
      .post("http://dev.****************/get-token", formdata)
      .then(res => {
        if (res.data) {
          console.log(res.data)

          localStorage.setItem("token", res.data.access_token)
          localStorage.setItem("updToken", res.data.update_token)
          this.props.history.push("/settings")
        }
      })
      .catch(error => {
        console.log(error)
      })

Answer 1

我看到了您的不记名令牌

您编写它：

 Authorization: `Bearer + ${token}`

但应该是：

Authorization: `Bearer ${token}`,

完整的答案是：

let token = localStorage.getItem("token")

axios
  .get("http://dev.*****************get-template", {
    headers: {
      Authorization: `Bearer ${token}`, //here remove + in template litereal
    },
  })
  .then(res => {
      console.log("Success")
  })
  .catch(error => {
    console.log(error)
  })

Answer 2

这是由于CORS问题引起的。

要解决此问题，您需要在服务器端设置Access-Control-Allow-Origin标头，允许您发送请求的域，也可以将其设置为*

Answer 3

这样做：

let token = localStorage.getItem("token")
axios.defaults.headers.common['Authorization'] = token

axios
  .get("http://dev.*****************get-template")
  .then(res => {
      console.log("Success")
  })
  .catch(error => {
    console.log(error)
  })

Axios获取请求响应，并禁止403错误

3 个答案: