使用Chrome开发人员工具制作HTTP请求 [英] Making HTTP Requests using Chrome Developer tools

问题描述

有没有办法使用Chrome开发人员工具发出HTTP请求而不使用像POSTER这样的插件？ Chrome（以及大多数其他浏览器）支持提取API ， ，现在很容易从devtools控制台发出HTTP请求。

例如获取JSON文件：

< pre class =snippet-code-js lang-js prettyprint-override> fetch（'https://jsonplaceholder.typicode.com/posts/1'）.then（res => res。 json（））.then（console.log）

$ b

Chrome开发工具实际上也支持新的异步/等待语法（即使通常只能在异步函数中使用）：

  const response =等待获取（'https：// js onplaceholder.typicode.com/posts/1'）
 console.log（await response.json（））
  

请注意，您的请求将服从同源策略，就像浏览器中的任何其他HTTP请求一样，所以要么避免跨源请求，要么确保服务器设置允许请求的CORS头。

使用插件（旧回答）

找到邮差插件，Chrome可以很好地工作。它允许您设置标题和URL参数，使用HTTP身份验证，保存经常执行的请求等。

Is there a way to make an HTTP request using the Chrome Developer tools without using a plugin like POSTER?

解决方案

Since the Fetch API is supported by Chrome (and most other browsers), it is now quite easy to make HTTP requests from the devtools console.

To fetch a JSON file for instance:

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

Chrome Devtools actually also support new async/await syntax (even though await normally only can be used within an async function):

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

Notice that your requests will be subject to the same-origin policy, just like any other HTTP-request in the browser, so either avoid cross-origin requests, or make sure the server sets CORS-headers that allow your request.

Using a plugin (old answer)

As an addition to previously posted suggestions I've found the Postman plugin for Chrome to work very well. It allow you to set headers and URL parameters, use HTTP authentication, save request you execute frequently and so on.

这篇关于使用Chrome开发人员工具制作HTTP请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！