尝试从提取API获取数据以获取对http://swapi.co

Question

我正在努力从本地creat-react-app项目向http://swapi.co.in发出成功请求。 我已经将提取API请求放入主容器的componentDidMount中。

fetchData = () => {
        return fetch('http://swapi.co/api/people', {method: 'GET'}).then((response) => {
            console.log(response);
        });
    }

    componentDidMount() {
        this.fetchData();
    }

给我一​​个

的错误

Failed to load http://swapi.co/api/people: Redirect from 'http://swapi.co/api/people' to 'https://swapi.co/api/people' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.


1 Uncaught (in promise) TypeError: Failed to fetch

我将fecth数据功能更新为

 fetchData = () => {
        return fetch('http://swapi.co/api/people', {
            method: 'GET',
            headers: {
                'Access-Control-Allow-Origin': '*',
            }

        }).then((response) => {

            console.log(response);
        });
    }

    componentDidMount() {
        this.fetchData();
    }

出现错误

Failed to load http://swapi.co/api/people: Response for preflight is invalid (redirect)
:3000/#/:1 Uncaught (in promise) TypeError: Failed to fetch

我尝试了多种配置模式：cors，Access-Control-Allow-Origin：origin，others。他们都没有为我工作。

可能是什么问题？

Answer 1

为什么您的HTTP请求有问题

服务器发送以下标头：

self

这些都不是CORS标头，并且在请求重定向时，它需要CORS。

如何修复

要解决此问题，您可以将HTTP更改为HTTPS，从而避免了重定向。

为什么自己不添加标题

由于标头用于阻止网站发出请求，因此标头必须由服务器发送。如果网站可以发送此邮件，那么CORS保护将不会添加任何内容。