Запрос Ajax Cross-Origin заблокирован: та же политика источника запрещает чтение удаленного ресурса

Я пишу простой сайт, который принимает в качестве ввода идиому и возвращает ее значение(Ы) и пример(ы) из Оксфордского словаря. Вот моя идея:

посылаю запрос по следующему URL:

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=[idiom]

например, если идиома "не далеко", я отправлю запрос:

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=not+go+far

и я буду перенаправлен на следующую страницу:

http://www.oxfordlearnersdictionaries.com/definition/english/far_1#far_1__192

на этой странице Я могу извлечь смысл(Ы) и пример(ы) идиомы. Вот мой код для тестирование. Он будет предупреждать ответ url:

<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here">
<br>
<button id="submit" type="">Submit</button>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit").bind('click',function(){
        var idiom=$("#idiom").val();
        $.ajax({
            type: "GET",
            url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });

    });
});
</script>

проблема в том, что у меня есть ошибка:

запрос Cross-Origin заблокирован: та же политика Origin запрещает чтение удаленного ресурса в http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+далеко. Это можно исправить, переместив ресурс в тот же домен или включив CORS.

может кто-нибудь сказать мне, как решить это, пожалуйста? Другой подход хорош слишком!--5-->

18
ajax cross-domain jquery

5 ответов

ваш вебсайт также на oxfordlearnersdictionaries.com домен? или вы пытаетесь позвонить в домен, и та же политика происхождения блокирует вас?

Если у вас нет разрешения установить заголовок через CORS на oxfordlearnersdictionaries.com домен вы можете искать другой подход.

3

JSONP или "JSON с заполнением" -это техника связи, используемая в программах JavaScript, запущенных в веб-браузерах, для запроса данных с сервера в другом домене, что запрещено типичными веб-браузерами из-за политики того же происхождения. JSONP использует тот факт, что браузеры не применяют политику одного и того же источника к тегам сценариев. Обратите внимание, что для работы JSONP сервер должен знать, как отвечать с результатами в формате JSONP. JSONP не работает с JSON-форматированием результаты.

http://en.wikipedia.org/wiki/JSONP

хороший ответ на stackoverflow:jQuery AJAX кросс-домен

   $.ajax({
        type: "GET",
        url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
        data:{q:idiom},
        async:true,
        dataType : 'jsonp',   //you may use jsonp for cross origin request
        crossDomain:true,
        success: function(data, status, xhr) {
            alert(xhr.getResponseHeader('Location'));
        }
    });
21

мы не можем получить данные с веб-сайта третьей стороны без jsonp.

вы можете использовать функцию php для извлечения данных, таких как file_get_contents() или CURL и т. д.

затем вы можете использовать url PHP с вашим кодом ajax.

<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here">
<br>
<button id="submit" type="">Submit</button>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit").bind('click',function(){
        var idiom=$("#idiom").val();
        $.ajax({
            type: "GET",
            url: 'get_data.php',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });

    });
});
</script>

создать файл PHP = get_data.в PHP

<?php
  echo file_get_contents("http://www.oxfordlearnersdictionaries.com/search/english/direct/");
?>
7

поместите ниже строки в верхней части файла, который вы вызываете через AJAX.

header("Access-Control-Allow-Origin: *");
4

добавьте код ниже к вашему.реврайт

набор заголовков Access-Control-Allow-Origin *

Это работает для меня.

спасибо

1