使用Chrome Developer工具发出HTTP请求

有没有一种方法可以使用Chrome Developer工具发出HTTP请求而无需使用POSTER之类的插件？

由于Chrome（和大多数其他浏览器）支持Fetch API，因此现在很容易从devtools控制台发出HTTP请求。

要GET例如一个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身份验证，保存您经常执行的请求等。

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

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

我知道，以前的帖子...但是将其留在此处可能会有所帮助。

现代浏览器现在支持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

ps：它将进行所有CORS检查，因为它已经得到了改进XmlHttpRequest。

如果您的网页中包含jquery，则可以在chrome开发人员控制台上编写该代码：

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

它的jQuery方式！

扩展@dhfsk 答案

这是我的工作流程

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

2. 开放邮递员

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

如果要从同一域执行POST，则始终可以使用Developer工具将表单插入DOM并提交：

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

要获取带有标题的请求，请使用此格式。

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

如果您在网站上使用jquery，则可以在控制台中使用类似的内容

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

简而言之，如果您希望请求使用与您正在查看的页面相同的浏览上下文，则可以在Chrome控制台中执行以下操作：

window.location="https://www.example.com";