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


当前回答

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

获取一个JSON文件:

fetch(“https://jsonplaceholder.typicode.com/posts/1”) .then(res => res.json()) 不要犹豫(console.log)

或者POST一个新资源:

fetch (https://jsonplaceholder.typicode.com/posts, { 方法:“文章”, 身体:JSON.stringify ({ 标题:“foo”, 身体:“酒吧”, 用户标识:1 }), 标题:{ “内容类型”:“application / json;charset = utf - 8 ' } }) .then(res => res.json()) 不要犹豫(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控制台只做:

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

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

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

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

这是jquery的方法!

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

获取一个JSON文件:

fetch(“https://jsonplaceholder.typicode.com/posts/1”) .then(res => res.json()) 不要犹豫(console.log)

或者POST一个新资源:

fetch (https://jsonplaceholder.typicode.com/posts, { 方法:“文章”, 身体:JSON.stringify ({ 标题:“foo”, 身体:“酒吧”, 用户标识:1 }), 标题:{ “内容类型”:“application / json;charset = utf - 8 ' } }) .then(res => res.json()) 不要犹豫(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和头文件) 根据需要编辑请求并运行