I'm new in react . Trying to make "get" request and getting 403 error forbidden, "Response for preflight does not have HTTP ok status.". In network tab in Request Method instead of "get" method shows "options". What could be the problem? Cors already open , problem with token

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)
  })

that's how I'm saving token. May be I'm not correctly saving it in localStorage? But when console.log it displays fine

 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)
      })

I'm new in react . Trying to make "get" request and getting 403 error forbidden, "Response for preflight does not have HTTP ok status.". In network tab in Request Method instead of "get" method shows "options". What could be the problem? Cors already open , problem with token

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)
  })

that's how I'm saving token. May be I'm not correctly saving it in localStorage? But when console.log it displays fine

 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)
      })

• javascript
• reactjs
• axios

• Could you share the error message on the console? – varun agarwal Commented Mar 18, 2019 at 6:51
• use 'str'+var or `str {var}` for string concatination. – arizafar Commented Mar 18, 2019 at 6:58
• My mistake was that the Get request is different from the Post request: Get doesn't have request data. – Achraf JEDAY Commented Jan 18, 2022 at 4:57

3 Answers 3

I see a problem in your Bearer token

you write it:

 Authorization: `Bearer + ${token}`

but it should be :

Authorization: `Bearer ${token}`,

and the full answer is :

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)
  })

Do it like this:

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)
  })

This is due to CORS issue.

To solve this you need to set Access-Control-Allow-Origin header on your server side, allowing the domain from which you are sending the request or you can set it to *