Ajax Cross-Origin Request Blocked: политика одного и того же происхождения запрещает чтение удаленного ресурса

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

Я отправляю запрос по следующему 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>

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

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

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

Ответ 1

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

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

Ответ 2

JSONP или "JSON with padding" - это метод связи, используемый в программах 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'));
        }
    });

Ответ 3

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

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

Затем вы можете использовать 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/");
?>

Ответ 4

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

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

Ответ 5

Добавьте приведенный ниже код в ваш .htaccess

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

Меня устраивает.

Спасибо

Ответ 6

У меня была такая же проблема, когда я работал на asp.net Mvc webApi, потому что Cors не был включен. Я решил это, включив Cors внутри метода регистрации WebApiconfig

Сначала установите Cors отсюда

   public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);



        config.EnableCors();
        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

Ответ 7

Если ваш веб-сайт также находится в домене oxfordlearnersdictionaries.com, используйте в файле oxfordlearnersdictionaries.com.htaccess следующее:

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

Ответ 8

Это тоже нужно.

<?php
header("Access-Control-Allow-Origin: *");

Ответ 9

Я использовал header("Access-Control-Allow-Origin: *"); метод, но все еще получил ошибку CORS. Оказывается, в запрашиваемом PHP-скрипте была ошибка (я забыл добавить точку (.) При объединении двух переменных). Как только я исправил эту опечатку, это сработало!

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