Ошибка при запросе JS

Question

Пытаюсь сделать сайт, который будет выводить информацию о пользователе через VK API, но при попытке запроса выдает ошибку: index.html:1 Access to XMLHttpRequest at 'https://api.vk.com/method/users.get?user_id=id1&v=5.130&access_token=f8f1cc75c0f63cef3542e41796e4c6d8707e63708c2ead8a3bf613f1a333bcb00f7f8d14cf9a2d8758c99' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Как ее исправить? Я понимаю, что там что-то блокирует запрос, но не понимаю, как убрать блокировку и разрешить запрос

    <!DOCTYPE html>
<html>
<head>
    <title>VK information</title>
    <link rel="stylesheet" href="main.css">
    <script>
        let headers = new Headers();
        var token = "f8f1cc75c0f63cef3542e41796e4c6d8707e63708c2ead8a3bf613f1a333bcb00f7f8d14cf9a2d8758c99"         
        var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
        var xhr = new XHR();
        function getInfo() {
            var text = document.getElementsByName("link")[0].value;         
            if (text.includes('vk.com/')){
                user_id = text.split('vk.com/')[1].split('/')[0]
            }
            else {
                alert('Нужно ввести ссылку на страничку VK.')
                return
            }
            url = "https://api.vk.com/method/users.get?user_id="+user_id+"&v=5.130&access_token="+token
            xhr.open('GET', url, true);
            xhr.onload = function() {
                handler( this.responseText );
            }
            xhr.onerror = function() {
                alert( 'Ошибка при получение информации: ' + this.status );
            }
            xhr.send();
        }
        function handler(text){
            alert(text)
        }
    </script>
</head>
<body>  
    <center>
        <div class="parent">
            <input type="text" name="link" placeholder="Введите ссылку VK...">                      
            <br></br>
            <button onclick="getInfo();">Узнать информацию.</button>
        </div>
    </center>
</body>
</html>

Answer 1

В ответе на CORS-запрос отсутствует заголовок Access-Control-Allow-Origin, используемый для проверки, может ли ресурс быть доступен для контента на текущем домене.

Если у вас есть доступ к серверу, то добавьте домен запрашивающего сайта в список разрешённых доменов, добавив его в значение заголовка Access-Control-Allow-Origin.

Например, для предоставления сайту https://amazing.site доступа к ресурсам с использованием CORS, заголовок должен выглядеть так:

Access-Control-Allow-Origin: https://amazing.site

Также вы можете разрешить доступ любому сайту, используя подстановку *. Используйте этот способ только для публичных API. В закрытых API * не должна использоваться, вместо этого должен быть установлен определённый домен или домены. При этом подстановка работает только для запросов с атрибутом crossorigin со значением anonymous.

Access-Control-Allow-Origin: *

Внимание: Использование * для доступа к закрытым API — плохая идея по очевидным причинам.

Чтобы разрешить любому сайту делать CORS-запросы без использования подстановки * (например, для включения авторизационных данных), ваш сервер должен считывать значение заголовка Origin из запроса и использовать это значение, чтобы задать Access-Control-Allow-Origin, а также выставить заголовок Vary: Origin, чтобы обозначить динамическую установку заголовка в зависимости от источника.

Конкретная директива для установки заголовков зависит от вашего сервера. Так в Apache нужно добавить следующую строку в конфигурацию сервера (в соответствующих разделах < Directory >, < Location >, < Files > или < VirtualHost >). Конфигурация обычно находится в файле с расширением .conf (стандартные названия: httpd.conf, apache.conf), либо в файле .htaccess.

Header set Access-Control-Allow-Origin 'origin-list'

В Nginx для установки этого заголовка используется команда:

add_header 'Access-Control-Allow-Origin' 'origin-list'

БЛОГ НА HUSL

Ошибка при запросе JS

Ответы (1 шт):