GET request works in postman but fails with Axios

Question

I'm sending GET request to the same endpoint with the same headers, including the Bearer, but while i get 200 and the correct JSON as a result when calling from Postman, when i send the request using Axios in my (Vue) project i get 302.

the call from the local project , running on localhost:8080 (in case its useful) is as follows:

  const { authToken, userID } = store.getters.authUser
  const config = {
    method: 'get',
    url: '/' + userID,
    headers: {
      Authorization: `Bearer ${authToken}`,
      'Content-Type': 'application/json'
    }
  }
  axios(config)
    .then(res => {
      console.log(res)
      return res
    })
    .catch(e => {
      console.log(e)
    })

while in postman all i do is create a GET request with the same url and all i add in the headers is the 'Bearer ...'

the error i get from axios is :

Error: Network Error
    at createError (createError.js?2d83:16)
    at XMLHttpRequest.handleError (xhr.js?b50d:87)

and response status is 302 , any idea whats going on here??

both values of userID and the authToken exists and are equal to the same values i used with postman, same goes for the url

Have you tried to use the url `http://localhost:8080/${userID}` ? — ocheriaf, Nov 11 '19 at 13:57
i'm not working against local server...the request goes to another server — yariv bar, Nov 11 '19 at 13:58
Did you check the values of vue store? It looks like you don't have a `userId` and/or `authToken` in store which is causing the redirects. When using Postman, you must be entering these details manually, so the server gets the data it requires to process the data. — Kalesh Kaladharan, Nov 11 '19 at 14:01
both values of userId and te token exists and are equal to the same values i used with postman — yariv bar, Nov 11 '19 at 14:05
i also use the complete address of the server, again same as the one i use in axios — yariv bar, Nov 11 '19 at 14:05
A 302 is a Moved … and should be accompanied by a `Location` header which the browser should follow automatically. Is the `Location` header missing? If so, that's the API being broken. — Quentin, Nov 11 '19 at 14:08
**Don't** set `'Content-Type': 'application/json'`. You're making a GET request. There is no request body to describe the content of! — Quentin, Nov 11 '19 at 14:08
In case your are using Chrome dev tools to see the axios request: could you do a "Copy as cURL" from the network tab and add the command in your question? — brass monkey, Nov 11 '19 at 14:20
Does this answer your question? [Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i) — T.J. Crowder, Apr 05 '21 at 14:00
Hi I am also facing the same issue. My `URL` is related to GitHub and it works when I open in Chrome with redirection and woks in PostMan but it does not work in `Axios` and shows the same error as you have mentioned. Were you able to find the issue and fix it? How did you resolve it? Any suggestion would be appreciated. — BATMAN_2008, Sep 30 '21 at 10:59

score -1 · Answer 1 · answered Nov 11 '19 at 14:38

As you said

the request goes to another server

my best guess is that the page on which the axios call is executed and the resource which is requested in the axios request are on different domains. This would mean that the request is a cross origin request. In that case the browser would do a preflight request (the GET request is not simple request in the sense of CORS because of an Authorization header is present). In that case your resource need to support CORS meaning you need to set a Access-Control-Allow-Origin header and the OPTIONS HTTP method need to be handled for the preflight request.

GET request works in postman but fails with Axios

1 Answers1