GET Request fails in Vuejs Fetch but works perfectly in Postman and in browser due to 302 redirectio-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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