使用Chrome开发工具进行HTTP请求

有没有一种方法,使一个HTTP请求使用Chrome开发工具,而不使用插件像海报?

452852 次浏览

如果你的网页有jquery在你的页面,那么你可以做它写在chrome开发者控制台:

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

这是jquery的方法!

由于Chrome(和大多数其他浏览器)支持获取API,现在很容易从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语法(即使await通常只能在async函数中使用):

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

请注意,您的请求将服从同源策略,就像浏览器中的任何其他http请求一样,因此要么避免跨源请求,要么确保服务器设置了允许您的请求的CORS-headers。

使用插件(旧答案)

作为之前发布的建议的补充,我发现Chrome的邮递员插件工作得非常好。它允许你设置头和URL参数,使用HTTP认证,保存你经常执行的请求等等。

如果你想编辑并重新发布你在Chrome开发者工具的网络选项卡中捕获的请求:

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

enter image description here

我知道,老帖子……但把这个留在这里可能会有帮助。

现代浏览器现在支持获取API. c。

你可以这样使用它:

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

保持简单,如果你想请求使用相同的浏览上下文的页面,你已经在看然后在Chrome控制台只做:

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

如果你想从同一个域执行POST,你可以使用开发者工具在DOM中插入一个表单并提交:

 insert form into document .

如果你在你的网站上使用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>

在@dhfsk 回答上展开

这是我的工作流程

    在Chrome DevTools中,右键单击你想要操作> Copy as cURL的请求 李Chrome DevTools Copy as cURL < / p > < / >
  1. 开放的邮递员

  2. 单击左上角的Import,然后单击Paste Raw Text邮递员从Chrome中粘贴原始文本cURL < / >

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

$.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>

要GET带报头的请求,请使用此格式。

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

是的,有一个没有任何第三方扩展的方法。

我已经构建了< >强javascript代码< / >强(你可以添加当浏览器书签),然后在任何站点上激活来监控&修改请求。:

enter image description here

如需进一步说明,请查看github页面。

你可以在Firefox的检查器中编辑/重新发送请求,而不需要使用任何第三方,如下所示:

  1. F12打开Firefox中的检查器▶进入Network选项卡
  2. 找到你的API请求并点击它,这样'Headers'部分就会出现在右边(你可以在顶部的栏中过滤)
  3. “Header”选项卡带有一个重新发送按钮,在这里你可以重新发送或编辑并重新发送

截图 .

最短的方法是:

await (await fetch('<URL>')).json()

使用现代async/await javascript sintax,你可以做到如下所示。

const options = {method: 'GET', Content-Type: 'application/json'};
let res = await fetch('https://yourdomain.com/somedata.json', options);
let json = await res.json();

它将进行所有CORS检查(跨原产地资源共享)。如果web服务器已经允许来自所有域的CORS,你就准备好了。如果你需要在web服务器上启用CORS,请遵循以下两种情况:一种是nginx,另一种是node express。

在NGINX中启用CORS

从所有网站启用CORS 如果需要对所有网站启用CORS,即接受所有网站的跨域请求,则需要添加

add_header Access-Control-Allow-Origin *;

从一个域启用CORS

add_header Access-Control-Allow-Origin "stackoverflow.com";

使用Express启用CORS

对于node,它只是用加纱剂安装cors,然后使用它

var express = require('express')
var cors = require('cors')
var app = express()


app.use(cors())


app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})


app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})