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-скрипте была ошибка (я забыл добавить точку (.) При объединении двух переменных). Как только я исправил эту опечатку, это сработало!
Итак, кажется, что вызываемый удаленный скрипт не может иметь ошибок в нем.