使用Chrome开发者工具发出HTTP请求

Question

有没有办法在不使用像POSTER这样的插件的情况下使用Chrome开发者工具发出HTTP请求？

Answer 1

如果您要编辑并重新发出已在Chrome开发者工具的"网络"标签中捕获的请求,请执行以下操作:

• 右键单击Name请求
• 选择 Copy > Copy as cURL
• 粘贴到命令行(命令包括cookie和标题)
• 根据需要编辑请求并运行

Answer 2

由于Chrome(以及大多数其他浏览器)都支持Fetch API,因此现在很容易从devtools控制台发出HTTP请求.

要获取 JSON文件,例如:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

或者POST一个新资源:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Chrome Devtools实际上也支持新的异步/等待语法(即使等待通常只能在异步函数中使用):

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

请注意,您的请求将受到同源策略的约束,就像浏览器中的任何其他HTTP请求一样,因此要么避免跨源请求,要么确保服务器设置允许您请求的CORS标头.

使用插件(旧答案)

作为以前发布的建议的补充,我发现Chrome 的Postman插件工作得非常好.它允许您设置标头和URL参数,使用HTTP身份验证,保存您经常执行的请求等.

Answer 3

我知道,老帖子......但是留在这里可能会有所帮助.

现代浏览器现在支持Fetch API.

你可以像这样使用它:

fetch("<url>")
    .then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
    .then(console.log); // print your data

obs:它将进行所有CORS检查,因为它是一个改进的XmlHttpRequest.

Answer 4

如果您的网页在您的网页中有jquery,那么您可以在chrome开发者控制台上进行编写:

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

它的jquery方式做到了!

Answer 5

扩展@dhfsk 答案

这是我的工作流程

1. 在Chrome DevTools中，右键单击要处理的请求> Copy as cURL

2. 开放邮递员

3. 单击Import左上角，然后Paste Raw Text

Answer 6

要使用标头的 GET 请求，请使用此格式。

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)

Answer 7

如果您想从同一个域执行POST,您可以使用Developer工具将表单插入DOM并提交:

Answer 8

我很幸运地结合了上述两个答案。在 Chrome 中导航到该站点，然后在 DevTools 的网络选项卡上找到请求。右键单击请求并复制，但复制为 fetch而不是 cURL。您可以将提取代码直接粘贴到 DevTools 控制台中并进行编辑，而不是使用命令行。