GET 请求在 Vuejs Fetch 中失败，但由于 302 重定向，在 Postman 和浏览器中完美运行

Question

我有一个使用 NuxtJS/Vuejs 构建的 Web 应用程序，其中我有一个字段，用户可以在其中提供 URL，我的应用程序应该向 URL 发出 GET 请求=] 并获取数据。大多数情况下，URL 与 GitHub 有关，它应该从那里获取 XML/JSON 数据。

当我在 browser/Postman 中提供肯定的 URL 时，就会发生重定向，并加载来自重定向的 URL 的数据。我想在我的代码中实现相同的目标，但它没有发生，我收到错误：

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

但是这些 URL 在浏览器和 Postman 中完美运行，没有任何问题。以下是我使用 Vuejs Fetch:

发出请求的代码

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

使用 Axios:

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

我尝试设置各种 header，我尝试使用 axios 等，但似乎对我没有任何作用。有人可以向我解释我做错了什么以及如何解决这个问题吗？非常感谢任何帮助或解决方法。

Answer 1

首先，'Access-Control-Allow-Origin' header 应该在服务器端设置，而不是在客户端进行调用。此 header 将来自服务器，告诉浏览器接受该响应。

你的代码之所以能从 postman/browser 运行是因为你在这样请求时不在 CORS 规则之下。

一种解决方法是调用您的后端并告诉后端从提供的 URL 中调用 GET 数据，然后 return 将其发送到您的 front-end.

示例：

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

Answer 2

正如在另一个答案中提到的，由于各种安全策略，包括 Fetch 和 Axios 在内的任何图书馆都不可能发出请求并获取数据。因此，我在我的 Spring boot 应用程序中创建了一个方法，该方法将从 URL 获取数据，并使用 Axios.

向我的 Spring boot 发出请求

import axios from 'axios'

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

Spring 启动应用程序：

    //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 请求在 Vuejs Fetch 中失败，但由于 302 重定向，在 Postman 和浏览器中完美运行

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

get

fetch

vue.js

axios

nuxt.js