igdb.com api | React Ax ios запрос заблокирован политикой CORS; В запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       49

igdb.com api | React Ax ios запрос заблокирован политикой CORS; В запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

0 голосов
/ 17 апреля 2020

Несмотря на то, что это очень распространенная проблема, решения, которые я искал, похоже, не решают эту проблему для меня. 

import React from "react";
import axios from "axios";

class GamesList extends React.Component {
    componentDidMount = async () => {
        const response = await axios.get("https://api-v3.igdb.com/games", {
            headers: {
                "user-key": "<API-KEY>",
                "Access-Control-Allow-Origin": "http://localhost:3000",
            },
        });
        console.log(response);
    };

    render() {
        return <div>MANY GAMES</div>;
    }
}

export default GamesList;

Сообщения об ошибках, которые я получаю при запуске этого кода: 

Access to XMLHttpRequest at 'https://api-v3.igdb.com/games' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://api-v3.igdb.com/games net::ERR_FAILED

uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)

Я также пытался установить "Access-Control-Allow-Origin": "*", хотя ошибка не меняется.

Существует ли простое исправление, которое не требует использования / создания прокси?

--- ОБНОВЛЕНИЕ --- после комментария @ HMR, я отредактировал код ниже согласно документации igdb, хотя я все еще получаю ту же ошибку. Где я не так с этим? 

import React from "react";
import axios from "axios";

class GamesList extends React.Component {
    componentDidMount = async () => {
        // As mention in the docs, I'm using POST with the necessary body
        axios.post("https://api-v3.igdb.com/headers", {
            body: {
                api_header: {
                    header: "Access-Control-Allow-Origin",
                    value: "*",
                },
            },
        });

        // now to make the actual request
        const response = await axios.get("https://api-v3.igdb.com/games", {
            headers: {
                "user-key": "<API-KEY>",
                "Access-Control-Allow-Origin": "http://localhost:3000",
            },
        });
        console.log(response);
    };

    render() {
        return <div>MANY GAMES</div>;
    }
}

export default GamesList;

Даже отправив следующее в https://api-v3.igdb.com/headers/ внутри почтальона возвращается Not found: 

{
    "api_header": {
        "header": "Access-Control-Allow-Origin",
        "value": "*"
    }
}

- ФИНАЛЬНОЕ ОБНОВЛЕНИЕ - Как @ goto1 и @HMR уже упоминали ниже, кажется, что сам API не поддерживает CORS правильно.

В итоге я получил прокси! Я использую https://github.com/Rob--W/cors-anywhere/ (ПРИМЕЧАНИЕ: мне пришлось npm install proxy-from-env вручную)

После запуска сервера с помощью node server.js я могу добавить адрес сервера к моему igdb api запрос. Конечный код: 

import React from "react";
import axios from "axios";

class GamesList extends React.Component {
    componentDidMount = async () => {
        const response = await axios.get("http://0.0.0.0:8080/https://api-v3.igdb.com/games", {
            headers: {
                "user-key": "<API-KEY>",
            },
        });
        console.log(response); // WORKS!
    };

    render() {
        return <div>MANY GAMES</div>;
    }
}

export default GamesList;

1 Ответ

1 голос
/ 17 апреля 2020

Вы пытались установить локальный хост: 3000 в пакете. json вместо топора ios заголовки

...