GET Request fails in Vuejs Fetch but works perfectly in Postman and in browser due to 302 redirection

Question

I have a web application built using NuxtJS/Vuejs within that I have a field where user can provide the URL and my application should make a GET request to that URL and obtain the data. Mostly the URL is related to GitHub from where it should fetch XML/JSON the data.

When I provide a certainly URL in browser/Postman then the redirection happens and data from the redirected URL is loaded. I want to achieve the same in my code but it's not happening and I get the error:

index.js:52 GET {{URL}} net::ERR_FAILED 302

But these URL works perfectly in browser and in Postman without any issue. Following is my code where I am making the request using Vuejs Fetch:

    fetch(inputURL, {
      method: 'GET'
    })
      .then((response) => {
        console.log('RESPONSE')
        console.log(response)
      })
      .catch((error) => {
        console.log('ERROR')
        console.log(error.response)
      })

Using the Axios:

    axios
      .get(inputURL)
      .then((response) => {
        console.log("RESPONSE");
        console.log(response);
      })
      .catch((error) => {
        console.log("ERROR");
        console.log(error);
      })

I tried setting various header, I tried using axios etc but nothing seems to work for me. Can someone please explain to me what am I doing wrong and how to fix this issue? Any help or workaround would be really appreciated.

If you are going to use axios, read the article on this link and then try it https://github.com/axios/axios/issues/3924 — a.gulcan, Oct 01 '21 at 21:02
@a.gulcan Thanks for the response. All they are saying is that the issue is something to do with the lack of functionality in `Axios` but I tried the `Fetch` as well even then it's not working for me. Is there any way I can try something which can resolve this issue? — BATMAN_2008, Oct 02 '21 at 03:33
You can debug. You can check the request header in the returned response value. You need to define the `validateStatus` function in axios to see the response value. Detailed usage is at this link: https://github.com/axios/axios/blob/master/README.md — a.gulcan, Oct 02 '21 at 05:24
@a.gulcan Thanks a lot for your response and input. Actually when I used `Axios` or `Fetch` to make API requests then the execution never goes into `Response` section. It directly goes into the `Error` section and I get the `index.js:52 GET {{inputURL}} net::ERR_FAILED 302` error. So I am not getting any `Status` or other values to check if something is wrong or I do not get the `location` of the redirected URL. What else can I try? Is there something else I need to do? Can you please help me out with this issue? — BATMAN_2008, Oct 02 '21 at 05:35
maybe this can help. https://stackoverflow.com/questions/39735496/redirect-after-a-fetch-post-call — a.gulcan, Oct 02 '21 at 06:14

Joao Leal · Accepted Answer · 2021-10-01T16:35:16.173

1

First of all, the 'Access-Control-Allow-Origin' header is something that should be set up on the server side, not on the client making the call. This header will come from the server to tell the browser to accept that response.

The reason why your code works from postman/browser is because you're not under the CORS rules when you request it like that.

One way around it, would be to make a call to your backend and tell the backend to call GET the data from the URL provided and then return it to your front-end.

Example:

//call_url.php
<?php
$url = $_GET['url'];
$response = file_get_contents($url);
echo $response
?>

//vue.js component
<input type="text" v-model="url"></input>
<button type="button" @click="callUrl">call me</button>
...
methods: {
  callUrl() { 
     axios.get('call_url.php?url=' + encodeURIComponent(this.url))
     .then(response => {
       //...do something
     }
  }
}

edited Oct 01 '21 at 16:35

answered Oct 01 '21 at 14:51

Joao Leal

5,533
1
13
23

Thanks a lot for your response. I was actually trying various things so I added `Access-Control-Allow-Origin`. Actually, I do not have any backend I am directly making the request to the `URL` using the `Vuejs`. Is there any way to do it directly within the `Vuejs`? I do not want to create any Backend because most of the URL works for me only certain URL does not work. – BATMAN_2008 Oct 01 '21 at 15:04
1

If the users are making calls from a consistent domain, you can ask them to add your website to their Access control list (which is unlikely). When I had a similar issue in a small project I just created something simple in php - see edited answer. – Joao Leal Oct 01 '21 at 16:29
Thanks a lot for your response. I checked with my client to see if they would agree to have a PHP file and are willing to set up a PHP server for deployment etc. They denied and said we need to handle it within the Vuejs itself. Is there any way I can handle it within Vuejs maybe by making multiple requests or something? Or is there any other way to read the data from redirected URL or can I use some other library apart from `Axios` and `Fetch`? – BATMAN_2008 Oct 02 '21 at 03:32
1

It is a security feature of modern browsers, doesn't matter which library you use. You either make the API/site send the Acess Control Allow Origin header with your site or you need to use something like what I described (if not in php, any other server could work, if they're hosting the vue app they already have a server running). You can also do something like this https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome but I don't recommend it. – Joao Leal Oct 02 '21 at 14:56
1

Thanks a lot for your response. Your response helped me to resolve the issue using `Java Spring-Boot`. Since in the backend I was using the `Java Spring Boot` I used it to make request to URL instead of `Axios` directly making request to URL. Thanks a lot for all your response and help. Have a great day :) – BATMAN_2008 Oct 03 '21 at 04:50

score 0 · Answer 2 · answered Oct 03 '21 at 04:55

As mentioned in another answer it's not possible for any library including Fetch and Axios to make requests and obtain the Data due to various security policies. Hence, I created a method in my Spring boot application that will obtain the data from URL and I make a request to my Spring boot using Axios.

import axios from 'axios'

axios.post('/urlDataReader', inputURL)
.then((response) => {
 console.log(response)
})
.catch((error) => {
 console.log(error)
})

Spring boot app:

    //Method to read the data from user-provided URL
    @PostMapping(value = "/urlDataReader", produces = "text/plain")
    public String urlDataReader(@RequestBody String inputURL) {
        final String result = new RestTemplate().getForObject(inputURL, String.class);
        return result;
    }

GET Request fails in Vuejs Fetch but works perfectly in Postman and in browser due to 302 redirection

2 Answers2