axios response.data always empty but Postman works

Question

I'm trying to make an extension that opens a bitly URL and fetches the title:

http://bit[dot]ly/30YbIyD

Postman follows the redirects and gets the resulting document for me.

When I try with Axios I get empty response data although the redirection seems to happen.

The first request receives a 301 pointing to "stackoverflow.com". In that request, we get "200 SUCCESS" however the data part is empty.

axios({
    'url': 'http://bit[dot]ly/30YbIyD',
    method: 'get',
    maxRedirects: 5,
    headers: {
      'Content-Type': 'text/html',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET',
    },
    withCredentials: true,
  })
  .then((res) => {
    console.log("Response", res)
  })
  .catch((err) => {
    console.log("Error with fetch: ", err)
  });

There are no error messages, but I was expecting to see the same result as Postman returns; the final document.

I also get these warnings in my browser console:

Cross-Origin Read Blocking (CORB) blocked cross-origin response <URL> with MIME type text/html. See <URL> for more details.

and

A cookie associated with a cross-site resource at http://bit.ly/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

Here are the headers Postman sends: https://i.stack.imgur.com/4pYc1.jpg

Can we check what headers or all request data POSTMAN is sending? — LearningEveryday, Oct 09 '19 at 14:32
@LearningEveryday Sure, here you go: https://imgur.com/a/OPqfvIX — Geon George, Oct 09 '19 at 14:34
I can think of a couple of things. Can you try with the headers POSTMAN is sending and what if you do not use axios and use simple fetch method? OR what happens when you use anything other than axios? Just a thought! — LearningEveryday, Oct 09 '19 at 16:50
I think the reason for the behavior you’re seeing is just that the 301 response from `http://bit.ly[dot]30YbIyD` doesn’t include an Access-Control-Allow-Origin header. So the browser doesn’t actually follow the redirect to `https://stackoverflow.com/`. That’s why Chrome devtools shows no response body for the `https://stackoverflow.com/` response — because the browser never actually ends up making any request to `https://stackoverflow.com/`. Try the same code in Firefox or Safari and look at the Network pane there and I think you’ll get a clearer picture of what’s actually happening. — sideshowbarker, Oct 11 '19 at 10:07
Try troubleshoot further, try adding `mode: 'no-cors'` to your axios call — or else just try with `fetch('https://bit.ly[dot]30YbIyD', { mode: 'no-cors'})`. In that case, the Network pane in Chrome devtools will show you a response body for the response from `https://stackoverflow.com/`. That’s because in the case, the browser will actually follow the 301 redirect. (You won’t be be able to access the response from your frontend JavaScript code, but the browser will still receive it.) — sideshowbarker, Oct 11 '19 at 10:11
Incidentally, you should remove the entire `headers` block from you axios call. Trying to set the Access-Control-Allow-Origin and Access-Control-Allow-Methods isn’t going to make things work. It’s only going to cause other errors. And if you’re doing a GET request, adding a Content-Type request header makes no sense; the purpose of the Content-Type request header is to set the content type for the request body, but for a GET request, there is no request body… Maybe you meant to be setting the Accept request header instead. — sideshowbarker, Oct 11 '19 at 10:16

score 0 · Answer 1 · answered Oct 09 '19 at 14:54

Use the following step:
1. Call the http://bit[dot]ly/30YbIyD using Axios.
2. Find the Location from the response Header. (accessing response header via Axios)
3. Call the URL present in the Location to get the actual content.

*** Browser and Postman are doing multiple requests to fetch the content. I have used the above steps in my Java application. Below code is for reference

if ( HttpStatus.SC_MOVED_TEMPORARILY  == statusCode ) {
            location = method.getResponseHeader("Location").getValue();
            if (sLog.isDebugEnabled()) {
                sLog.debug("location: " + location);
            }                                                                  
}

axios response.data always empty but Postman works

1 Answers1