1

Столкнулся с такой проблемой, Chrome выдает ошибку следующего содержания.

Failed to load http://localhost:3000/cars: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

Вот запрос с помощью которого обращаюсь к серверу:

getData () {
    const url = "http://localhost:3000/cars";
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
    xhr.onload = function () {
         const response = JSON.parse(xhr.responseText);
         if (xhr.status == "200") {
              return response;
         } else {
              console.error(response);
         }
    };
        xhr.send();
}
1
  • У вас получается кросс-доменный запрос, возможно вы пытаетесь сделать запрос на другой порт или на другое доменное имя. 17 апр 2018 в 7:04

2 ответа 2

3

Это не ошибка, это ограничение безопасности.

Происходит это из-за того что страница, с которой вы отправляете этот запрос загружена не с этого сервера(порта)

возможно вам достаточно разместить страницу с которой вы отправляете запрос на сервер куда вы отправляете запрос

В противном случае

Ваш веб сервер должен устанавливать заголовок access-control-allow-origin

судя по сообщению

Failed to load http://localhost:3000/cars: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access

у Вас там null

для тестирования достаточно поставить туда символ * что разрешит кросс доменные запросы

а вообще, Вам сюда кросс доменные запросы

1
  • Спасибо! Разобрался. 17 апр 2018 в 18:47
0

Можно:

Есть небольшой трюк с PHP. И этот трюк будет работать не только с Google, но и с любыми сайтами, к которым у вас нет доступа и вы не можете добавить Access-Control-Allow-Origin *

Нам нужно создать PHP-файл (например. getContentFromUrl.php) на нашем сервере и сделать обращение к нему.

PHP

<?php

$ext_url = $_POST['ext_url'];

echo file_get_contents($ext_url);

?>

JS

$.ajax({
    method: 'POST',
    url: 'getContentFromUrl.php', // link to your PHP file
    data: {
        // url куда наш сервер будет отправлять запрос, который мы не можем сделать через AJAX
        'ext_url': 'https://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis'
    },
    success: function(data) {
        // теперь мы можем взять любые данные из внешнего url, потому что у нас есть вся страница
        var $h1 = $(data).find('h1').html();

        $('h1').text($h1);
    },
    error:function() {
        console.log('Error');
    }
});

Как это работает:

  1. Ваш браузер с помощью JS отправит запрос на ваш сервер
  2. Ваш сервер отправит запрос на любой другой сервер и получит ответ
  3. Ваш сервер отправит этот ответ в ваш JS файл

И мы можем добавить event типа onClick на кнопку. Надеюсь, это поможет!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.