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

Question

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

Answer 1

自 Fetch API Chrome(以及大多数其他浏览器)支持，现在可以很容易地从 devtools 控制台发出 HTTP 请求。

例如要获取 JSON 文件:

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

或者发布新资源:

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 实际上还支持新的 async/await 语法(尽管 wait 通常只能在异步函数中使用):

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

请注意，您的请求将受到 same-origin policy 的约束，就像浏览器中的任何其他 HTTP 请求一样，因此要么避免跨源请求，要么确保服务器设置允许您的请求的 CORS header 。

使用插件(旧答案)

作为之前发布的建议的补充，我发现了 Postman Chrome 插件运行良好。它允许您设置 header 和 URL 参数、使用 HTTP 身份验证、保存您经常执行的请求等。