Как отправить запрос на публикацию из браузера Chrome

Обновлено: 21.11.2024

Обратите внимание: если форма имеет атрибут enctype multipart/form-data , данные будут находиться в разделе «Полезная нагрузка запроса» в немного другом формате.

Статьи по теме

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

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

Спасибо, Мика, я на самом деле погуглил и нашел это, но спасибо за ваш ответ!

Можете ли вы порекомендовать подробный курс по инструментам разработки Chrome? У вас есть такой курс?

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

У меня вопрос. Какой объект или команду я поместил бы в console.log, если бы хотел записывать то, что отправил?

Я знаю, что это старый пост, но я продолжаю видеть проблему в Chrome коллеги. Когда он отправляет обычную форму (без данных из нескольких частей) с установленным флажком сохранения журналов, раздел данных формы вообще не появляется. Все подается, но в записи это не отображается. Я нашел несколько человек, задающих тот же вопрос, но до сих пор не нашел ответа. Есть предположения? Спасибо. Кстати, отличный пост.

На самом деле я нашел сообщение, в котором говорилось, что в Chrome версии 61 и 62 возникла проблема, аналогичная той, о которой я сообщал. И это обновление должно решить эту проблему. Компьютеру моего коллеги 61 год, и его автоматические обновления не работают. Как только он ответит, я проверю еще раз и постараюсь отследить свои результаты.

Спасибо за исследование! Буду рад получить ответ!

Январь 2019 г., multipart/form-data в Chrome 71 снова удалили полезные данные запроса.

Я использую Chrome 71 и все еще вижу данные формы. Скорее всего, вам нужно установить флажок «Сохранить журнал» в сетевой панели, чтобы следующая загрузка страницы не уничтожила данные.

Оставить ответ Отменить ответ

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются данные ваших комментариев.

Сервер, на котором размещен основной веб-сайт Reddit, обрабатывает ваш запрос и возвращает ответ вашему браузеру. Ваш браузер достаточно умен, чтобы обработать отправленный ответ и отобразить сайт, который вы видите на снимке экрана, со всеми его цветами, изображениями, текстом и презентацией.

Использование инспектора

Не закрывая инспектор, нажмите на вкладку Сеть:

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

Нажмите на вложенную вкладку Ответ, чтобы просмотреть необработанные данные ответа.

Еще один момент, на который следует обратить внимание при использовании вкладки Сеть в инспекторе, это то, что помимо первого запроса возвращается множество других запросов:

Вы должны увидеть только один запрос и ответ, содержащий HTML, но никаких дополнительных запросов, автоматически выдаваемых, как вы видите в браузере.

Методы запроса

Вернемся к диаграмме из шага 3 выше, когда мы рассмотрели ответы на вкладке Сеть.Возможно, вы заметили два столбца с именами «Метод» и «Статус». Если столбец «Метод» не отображается, возможно, он скрыт по умолчанию. Чтобы отобразить столбец «Метод», щелкните правой кнопкой мыши «Статус» и выберите Метод. Столбец «Метод» теперь должен отображаться рядом со столбцом «Статус».

В этом разделе мы рассмотрим, что означает информация, показанная в этих столбцах.

В столбце Статус отображается статус ответа на каждый запрос. Подробнее об ответах мы поговорим позже в этой книге. Важно понимать, что каждый запрос получает ответ, даже если ответ является ошибкой — это все равно ответ. (Технически это не на 100 % верно, так как время ожидания некоторых запросов может истечь, но мы пока отложим эти редкие случаи.)

GET-запросы

Пользователи curl могут ввести следующую команду на своем терминале:

перед отправкой запроса обязательно выберите ПОЛУЧИТЬ .

Команда curl для этого примера:

POST-запросы

Вот команда curl:

Давайте рассмотрим еще один пример выполнения запроса POST путем заполнения веб-формы. Наш образец формы выглядит в браузере следующим образом:

После заполнения формы вы будете перенаправлены на страницу, которая выглядит следующим образом:

Примечание. Убедитесь, что заголовок Content-Type имеет значение application/x-www-form-urlencoded . В противном случае ваш POST-запрос не будет правильно интерпретирован приложением.

Если вы используете Paw 3, выберите вкладку Form URL-Encoded вместо вкладки Text.
Если вы используете Insomnia, убедитесь, что вы выбрали "Form URL Encoded" в раскрывающемся меню Body. И если вы используете Postman, убедитесь, что переключатель для x-www-form-urlencoded выбран на вкладке Body.

Или вы можете использовать curl:

Обратите внимание, что на снимке экрана и в команде curl мы указываем дополнительный параметр player_name=albert . Это имеет тот же эффект, что и ввод имени в первое поле «Как тебя зовут?» форму и отправить ее.

Мы можем проверить содержимое с помощью инспектора (щелкните правой кнопкой мыши и выберите «Проверить» ). Вы увидите, что параметр player_name, который мы отправляем как часть POST-запроса, встроен в форму через атрибут name элемента ввода:

Запрос POST, сгенерированный инструментом HTTP или curl, аналогичен заполнению формы в браузере, отправке этой формы и последующему перенаправлению на следующую страницу. Внимательно посмотрите на необработанный ответ на снимке экрана инструмента HTTP. Ключевая информация, которая перенаправляет нас на следующую страницу, указана в поле Location: http://al-blackjack.herokuapp.com/bet. Расположение и связанные с ним данные являются частью того, что известно как заголовок ответа HTTP (да, запросы тоже имеют заголовки, но в данном случае это заголовок ответа). Пока не слишком беспокойтесь об этом, так как мы обсудим заголовки в следующем разделе. Ваш браузер видит заголовок ответа и автоматически отправляет новый запрос на URL-адрес, указанный в заголовке Location, тем самым инициируя новый, несвязанный запрос. Форма "Сделать ставку", которую вы видите, является ответом на этот второй запрос.

Примечание. Если вы используете какой-либо другой HTTP-инструмент, например Insomnia или Postman, вам, возможно, придется снять флажок "автоматически следовать перенаправлениям", чтобы увидеть заголовок ответа Location.

Если вы не поняли предыдущий абзац, прочитайте его еще раз. Очень важно понимать, что при использовании браузера браузер скрывает от вас большую часть лежащего в основе цикла HTTP-запроса/ответа.Ваш браузер выдал первоначальный запрос POST, получил ответ с заголовком Location, затем выдал другой запрос без каких-либо действий с вашей стороны, а затем отобразил ответ на этот второй запрос. Опять же, если бы вы использовали чистый HTTP-инструмент, вы бы увидели заголовок ответа Location из первого запроса POST, но инструмент не выдал бы вам второй запрос автоматически. (Некоторые инструменты HTTP имеют эту возможность, если вы отметите опцию «автоматически следовать перенаправлениям».)

Выше показаны различные заголовки, передаваемые во время цикла запроса/ответа. Кроме того, мы видим, что запрос и ответ содержат разные наборы заголовков в разделе «Заголовки запроса»:

Заголовки запроса

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

Обзор

Чтобы получить доступ к DevTools на любой веб-странице или в приложении в Google Chrome, вы можете использовать один из следующих вариантов:

Откройте меню Chrome в правом верхнем углу окна браузера и выберите "Инструменты" > "Инструменты разработчика".
Нажмите правой кнопкой мыши на любом элементе страницы и выберите "Проверить элемент".

Как посмотреть заголовки запросов?

Самый простой способ просмотра заголовков ответов — использование веб-браузера. В Google Chrome перейдите на страницу, которую вы хотите исследовать, и щелкните правой кнопкой мыши (ПК) или нажмите, удерживая клавишу Command (MAC), чтобы открыть параметры, а затем выберите Проверить.

Какой полный URL-адрес документа запрашивается браузером?

а. Какой URL-адрес документа запрашивается браузером? URL-адрес документа — cs453/index. HTML.

Можно ли отправить две разные веб-страницы по одному и тому же постоянному соединению?

Может ли клиент открыть три или более одновременных соединения с Givenserver?

Может ли клиент открыть три или более одновременных соединений с данным сервером? Клиент может открывать столько соединений, сколько пожелает, с данным сервером. RFC2616 указывает, что клиенты должны ограничивать одновременные подключения и не должны поддерживать более двух с любым сервером или прокси-сервером.

Может ли клиент запросить несколько ресурсов в одном TCP-соединении?

Каково оптимальное количество постоянных подключений для лучшей производительности?

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

Оглавление

Как я вижу свои запросы на публикацию в Chrome?

Просто сделайте следующее:

Откройте Chrome DevTools (Cmd + Opt + I на Mac, Ctrl + Shift + I или F12 в Windows) и перейдите на вкладку "Сеть".
Нажмите значок "Фильтр".
Введите метод фильтрации: method:POST.
Выберите запрос, который нужно отладить.
Просмотрите сведения о запросе, который нужно отладить.

Как исправить инструменты разработчика Chrome?

Посетите страницу с проблемами, которые нужно исправить, например samesite-sandbox.glitch.me.
Откройте Инструменты разработчика.
Нажмите кнопку "Перейти к проблемам" на желтой панели предупреждений. Либо выберите "Проблемы" в меню "Дополнительные инструменты".
Открыв вкладку "Проблемы", при необходимости нажмите кнопку "Обновить страницу".

Как включить блокировку запросов в инструментах разработки Chrome?

Чтобы использовать блокировку запросов в DevTools:

Щелкните правой кнопкой мыши ресурс на панели сети.
Выберите «Блокировать URL-адрес запроса» — теперь этот ресурс будет исключен из последующих загрузок страниц.

Как найти вызовы API в инструментах разработчика Chrome?

Откройте Chrome и перейдите на страницу, которую хотите протестировать. Щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить». Откроется консоль разработчика.

Использование Google Chrome

Нажмите правой кнопкой мыши в окне или на вкладке браузера и выберите "Проверить".
Перейдите на вкладку "Сеть" на появившейся панели.
Перейдите к URL-адресу, который вы хотите передать.
Нажмите кнопку загрузки (Экспорт HAR появляется, когда вы наводите на него указатель мыши).
Назовите файл.
Нажмите "Сохранить".

Как просмотреть файлы JSON в Chrome?

Инструкции по открытию файлов JSON в веб-браузере (Chrome, Mozilla)

Откройте интернет-магазин в веб-браузере с помощью меню параметров приложений или напрямую по этой ссылке.
Здесь введите JSON View в строке поиска в категории «Расширения».
Вы получите различные расширения, похожие на JSON View, для открытия файлов формата JSON.

Как устранить проблему с браузером?

Пять лучших способов отладки проблем с веб-сайтом

Виновником может быть синтаксис. По сравнению с логическими ошибками синтаксические ошибки встречаются в изобилии в любом фрагменте кода.
Некоторые скрипты зачеркнуты.
Проверьте кроссбраузерные проблемы.
Минификация: да или нет?
Немного оптимизируйте среду разработки.

Как включить инструменты разработчика F12 в Chrome?

Кроме того, вы можете использовать меню Chrome в окне браузера, выбрать параметр "Дополнительные инструменты", а затем выбрать "Инструменты разработчика". Чтобы открыть консоль в Edge, нажмите F12, чтобы получить доступ к инструментам разработчика F12.

Как разблокировать запрос в Chrome?

Чтобы разблокировать отправку веб-страниц с определенного веб-сайта в настольной версии:

Откройте веб-сайт в Chrome.
Нажмите значок информации слева от URL-адреса;
Напротив "Уведомления" выберите "Спросить" или "Разрешить".

Как проверить запросы браузера?

Как получить URL-адрес в Chrome?

Как фильтровать сетевые запросы в Chrome DevTools?

Просто перейдите на страницу и откройте вкладку сети. Вы можете увидеть вкладку сети, нажав cmd + opt + j на вашем Mac или ctrl + shift + j в Windows. По умолчанию откроется вкладка консоли в DevTools. Нажатие «cmd + opt + j» открывает панель консоли в DevTools

Как отредактировать запрос в Chrome Developer Tools?

Как искать что-то в Chrome DevTools?

Обычно: на любой панели используйте сочетание клавиш (win: Ctrl+Shift+f, mac: Cmd+Opt+f), чтобы открыть панель поиска. Введите любой текст, который вы хотите найти на текущей HTML-странице. Обратите внимание, что щелчок по одному из результатов (номер строки из источника) откроет источник на панели источников.

Как просмотреть данные публикации?

Просмотр данных POST с помощью инструментов разработчика Chrome

Откройте Инструменты разработчика в Chrome. Выберите вкладку "Сеть" (вверху).
Отправить форму. Наблюдайте за происходящим в консоли инструментов разработчика.

Выполняет ли Firefox POST-запрос?

Как получить запрос на отдых?

Пример использования прокси-сервера Postman

Как я могу получить доступ к данным из почтового запроса?

var items = ‘<“items”:[<“Desc”:”item1″>]>’; элементы = JSON. разобрать (элементы); переменные данные = элементы; $. сообщение («отправить. php», функция (данные) < предупреждение («Данные загружены:» + данные); >);

Можно ли просмотреть данные POST-запроса в Chrome?

Как найти параметры публикации веб-сайта с помощью Google Chrome?

Нажмите на ресурс, который вы хотите проверить, и прочитайте запрос (нажмите на вкладку заголовков слева от списка ресурсов). Вы можете увидеть заголовки запроса, данные формы и параметры строки запроса.

Как я могу отладить запрос POST в Chrome?

Используйте API chrome.webRequest для наблюдения и анализа трафика, а также для перехвата, блокировки или изменения запросов в процессе выполнения.

Вы должны объявить разрешение "webRequest" в манифесте расширения для использования API веб-запросов вместе с необходимыми разрешениями хоста. Чтобы перехватить запрос подресурса, расширение должно иметь доступ как к запрошенному URL-адресу, так и к его инициатору. Если вы хотите использовать API веб-запросов в режиме блокировки, вам необходимо дополнительно запросить разрешение «webRequestBlocking». Например:

API веб-запросов определяет набор событий, которые следуют за жизненным циклом веб-запроса. Эти события можно использовать для наблюдения и анализа трафика. Определенные синхронные события позволят вам перехватить, заблокировать или изменить запрос.

Здесь показан жизненный цикл события для успешных запросов, за которым следуют определения событий:

API веб-запросов гарантирует, что для каждого запроса onCompleted или onErrorOccurred инициируется как конечное событие, за одним исключением: если запрос перенаправляется на URL-адрес data://, onBeforeRedirect является последним зарегистрированным событием.

Следующие заголовки в настоящее время не предоставляются для события onBeforeSendHeaders. Не гарантируется, что этот список будет полным и стабильным.

Авторизация
Управление кэшем
Подключение
Длина содержания
Хост
If-Modified-Since
Если не совпадает
Если-диапазон
Частичные данные
Прагма
Прокси-авторизация
Прокси-соединение
Передача-кодирование

Начиная с Chrome 79, изменения заголовка запроса влияют на проверки совместного использования ресурсов между источниками (CORS). Если измененные заголовки для запросов между источниками не соответствуют критериям, это приведет к отправке предварительной проверки CORS, чтобы спросить сервер, могут ли такие заголовки быть приняты. Если вам действительно нужно изменить заголовки таким образом, чтобы нарушить протокол CORS, вам нужно указать «extraHeaders» в opt_extraInfoSpec . С другой стороны, модификации заголовка ответа не работают, чтобы обмануть проверки CORS.Если вам нужно обмануть протокол CORS, вам также необходимо указать «extraHeaders» для модификаций ответа.

Начиная с Chrome 79, API webRequest по умолчанию не перехватывает предварительные запросы и ответы CORS. Предварительная проверка CORS для URL-адреса запроса видна расширению, если есть прослушиватель с дополнительными заголовками, указанными в opt_extraInfoSpec для URL-адреса запроса. onBeforeRequest также может брать дополнительные заголовки из Chrome 79.

Начиная с Chrome 79, следующий заголовок запроса не предоставляется и не может быть изменен или удален без указания «extraHeaders» в opt_extraInfoSpec :

Примечание. Изменение заголовка запроса Origin может работать не так, как предполагалось, и может привести к непредвиденным ошибкам при проверке ответа CORS. Это связано с тем, что, хотя расширения могут изменять только заголовок запроса источника, они не могут изменить источник или инициатора запроса, что является концепцией, определенной в спецификации Fetch для представления того, кто инициирует запрос. В таком сценарии сервер может разрешить доступ CORS для измененного запроса и поместить источник заголовка в заголовок Access-Control-Allow-Origin в ответе. Но он не будет соответствовать неизменному источнику запроса и приведет к сбою CORS.

Начиная с Chrome 72, если вам нужно изменить ответы до того, как блокировка чтения из разных источников (CORB) сможет заблокировать ответ, вам нужно указать «extraHeaders» в opt_extraInfoSpec .

Начиная с Chrome 72, следующие заголовки запросов не предоставляются и не могут быть изменены или удалены без указания «extraHeaders» в opt_extraInfoSpec :

Принять язык
Принять кодировку
Реферер
Файл cookie

Начиная с Chrome 72 заголовок ответа Set-Cookie не предоставляется и не может быть изменен или удален без указания «extraHeaders» в opt_extraInfoSpec .

Начиная с Chrome 89, заголовок ответа X-Frame-Options нельзя эффективно изменить или удалить без указания «extraHeaders» в opt_extraInfoSpec .

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

Отдельные сообщения, отправленные через установленное соединение WebSocket.
WebSocket закрывает соединение.

Перенаправления не поддерживаются для запросов WebSocket.

Начиная с Chrome 72, расширение сможет перехватывать запрос только в том случае, если у него есть разрешения хоста как на запрошенный URL, так и на инициатора запроса.

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

Чтобы зарегистрировать прослушиватель событий для веб-запроса, вы используете вариант обычной функции addListener(). В дополнение к указанию функции обратного вызова вы должны указать аргумент фильтра, и вы можете указать необязательный аргумент дополнительной информации.

Три аргумента функции addListener() API веб-запросов имеют следующие определения:

Вот пример прослушивания события onBeforeRequest:

Каждый вызов addListener() принимает в качестве первого параметра обязательную функцию обратного вызова. Этой функции обратного вызова передается словарь, содержащий информацию о текущем запросе URL. Информация в этом словаре зависит от конкретного типа события, а также от содержимого opt_extraInfoSpec .

Если необязательный массив opt_extraInfoSpec содержит строку 'blocking' (разрешено только для определенных событий), функция обратного вызова обрабатывается синхронно. Это означает, что запрос блокируется до тех пор, пока не вернется функция обратного вызова. В этом случае обратный вызов может вернуть webRequest.BlockingResponse, определяющий дальнейший жизненный цикл запроса. В зависимости от контекста этот ответ позволяет отменить или перенаправить запрос ( onBeforeRequest ), отменить запрос или изменить заголовки ( onBeforeSendHeaders , onHeadersReceived ), а также отменить запрос или предоставить учетные данные для аутентификации ( onAuthRequired ).

Если необязательный массив opt_extraInfoSpec вместо этого содержит строку asyncBlocking (разрешено только для onAuthRequired ), расширение может асинхронно генерировать webRequest.BlockingResponse.

Фильтр webRequest.RequestFilter позволяет ограничить запросы, для которых инициируются события, в различных измерениях:

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

При разработке расширения, использующего API веб-запросов, важно понимать несколько деталей реализации:

В текущей реализации API веб-запросов запрос считается отмененным, если хотя бы одно расширение дает указание отменить запрос.Если расширение отменяет запрос, все расширения уведомляются событием onErrorOccurred. Только одному расширению разрешено перенаправлять запрос или изменять заголовок за раз. Если несколько расширений пытаются изменить запрос, последнее установленное расширение выигрывает, а все остальные игнорируются. Расширение не уведомляется, если его инструкция по изменению или перенаправлению была проигнорирована.

Chrome использует два кэша: кэш на диске и очень быстрый кэш в памяти. Время жизни кэша в памяти привязано к времени жизни процесса рендеринга, что примерно соответствует вкладке. Запросы, на которые отвечает кэш в памяти, невидимы для API веб-запросов. Если обработчик запросов меняет свое поведение (например, поведение, в соответствии с которым запросы блокируются), простое обновление страницы может не учитывать это измененное поведение. Чтобы убедиться, что изменение поведения прошло, вызовите handlerBehaviorChanged(), чтобы очистить кеш в памяти. Но не делайте этого часто; очистка кеша - очень дорогая операция. Вам не нужно вызывать handlerBehaviorChanged() после регистрации или отмены регистрации прослушивателя событий.

Свойство timestamp событий веб-запроса гарантируется только внутренне согласованным. Сравнение одного события с другим событием даст вам правильное смещение между ними, но сравнение их с текущим временем внутри расширения (например, с помощью (new Date()).getTime() ) может дать неожиданные результаты.

Если вы попытаетесь зарегистрировать событие с недопустимыми аргументами, будет выдана ошибка JavaScript, и обработчик события не будет зарегистрирован. Если во время обработки события возникает ошибка или если обработчик событий возвращает недопустимый блокирующий ответ, в консоли вашего расширения регистрируется сообщение об ошибке, а обработчик игнорирует этот запрос.

Поскольку эта функция использует обработчик событий блокировки, для нее требуется разрешение "webRequest", а также разрешение "webRequestBlocking" в файле манифеста.

В следующем примере показано, как удалить заголовок User-Agent из всех запросов:

Читайте также: