JSONP Cross-доменные данные приобретения для достижения поиска Baidu

JavaScript
JSONP Cross-доменные данные приобретения для достижения поиска Baidu

Когда эта курица недавно написала страницу с запросом данных, она сообщила о следующей ошибке.

Failed to load https://...:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:7070' is therefore not allowed access.

Поняв причину, я узнал, что это было вызвано междоменными запросами.Узнав о междоменных политиках и политиках одного и того же источника, я написал демонстрационную версию, чтобы поиграть с ней.

Просто расскажите о междоменном

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

Что такое политика единого происхождения?

Политика одинакового происхождения/SOP (политика единого происхождения) – это соглашение, которое было введено в браузеры компанией Netscape в 1995 году. Это основная и самая основная функция безопасности браузеров. Без единой политики происхождения браузеры уязвимы для XSS. , CSFR и другие атаки. Так называемая гомология означает, что «протокол + доменное имя + порт» одинаковы, даже если два разных доменных имени указывают на один и тот же IP-адрес, они не гомологичны.

Политика того же происхождения ограничивает следующие действия:

1.Cookie、LocalStorage 和 IndexDB 无法读取
2.DOM 和 Js对象无法获得
3.AJAX 请求不能发送

Если предположить, что политика одинакового происхождения отсутствует, то мой файл cookie на веб-сайте А может быть получен любым веб-сайтом; тогда владелец этого веб-сайта может использовать мой файл cookie (то есть мою личность) для работы на веб-сайте А. Политику того же происхождения можно рассматривать как краеугольный камень безопасности веб-интерфейса.Если политика того же происхождения отсутствует, браузер вообще не будет защищен.

Гомологическая стратегия наложила строгие ограничения, но на самом деле есть много мест, где можно прорваться через ограничения гомологичных стратегий, то есть, как мы часто говорим, кросс-домен. Существует множество междоменных методов (например, междоменное воспроизведение JSONP, междоменное совместное использование ресурсов Cors, обратный прокси и т. д.).

Междоменное использование jsonp

Из-за политики одинакового происхождения обычно веб-страницы, расположенные по адресу server1.example.com, не могут взаимодействовать с серверами, отличными от server1.example.com, в то время как страницы HTML<script>Элемент является исключением. использовать<script>С помощью этой открытой политики элементов веб-страницы могут получать данные JSON, динамически генерируемые из других источников, и этот шаблон использования является так называемым JSONP. Данные, захваченные с помощью JSONP, представляют собой не JSON, а произвольный JavaScript, выполняемый с помощью интерпретатора JavaScript вместо парсера JSON.

образец кода

function handleResponse(response) {
   alert(`You get the data : ${response}`)
}
const script = document.createElement('script')
script.src = 'http://somesite.com/json/?callback=handleResponse'
document.body.insertBefore(script, document.body.firstChild)

Функция обратного вызова здесь очень важна.Тег сценария, динамически добавляемый в тело, может использовать загруженный файл для совместного использования глобальной области видимости с другими файлами JS в файле HTML. То есть ресурс, загруженный тегом , может использоваться функциями в глобальной области видимости!

Играйте и напишите окно поиска Baidu

Baidu имеет открытый интерфейс данных:Билеты 0. Baidu.com/5ah 1F Группа A 8AA5…

Откройте домашнюю страницу Baidu в браузере Chrome, вы можете найти ее в инструментах разработчика в сети.Мы можем использовать его напрямую. С помощью jsonp мы можем добиться междоменного сбора горячих данных, связанных с содержимым поля ввода, и нажать, чтобы перейти. Конкретную реализацию см. в исходном коде проекта Github.

добиться эффекта:Структура страницы очень проста, как показано на рисунке:

Код реализации перекрестной домена JSONP

  document.onkeyup = function () {
    var val = text.value
    var script = document.createElement('script')
    script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=dosomething`;
    document.body.appendChild(script)
  }
  function dosomething (data) {
    var oUl = document.querySelector('#lists ul')
    oUl.innerHTML = ''
    data.s.map(function (html) {
      var oLi =  document.createElement('li')
      oLi.innerHTML = html
      oLi.onclick = function () {
        window.location.href = `http://www.baidu.com/s?wd=${html}`
      }
      oUl.appendChild(oLi)
    })
}

Это просто междоменная реализация с использованием jsonp.Простая небольшая демонстрация, новичкам, таким как я, удобно учиться, другие файлы структуры и стиля не перечислены один за другим, вы можете перейти ко мне, чтобы загрузить мой полный проект для просмотра Полный адрес проекта:Github:baidu_demo

Справочная статья:

  1. Стандартные междоменные решения для внешнего интерфейса (полное)
  2. Запрос перекрестного источника JSONP и CORS
  3. Никогда больше не изучайте AJAX! (3) Междоменное приобретение ресурсов ② — JSONP и CORS
  4. Подробное объяснение междоменного запроса jsonp — от сложного к простому
Категории