使用浏览器发送post请求

最新推荐文章于 2026-03-31 16:53:06 发布

原创最新推荐文章于 2026-03-31 16:53:06 发布 · 7.9k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

weixin_44499429

关注

标签

#postman #edge浏览器 #chrome devtools #测试工具

分类前端开发

收录于

本文介绍了通过浏览器发送POST请求的两种常见方式：fetchAPI的简洁用法和XMLHttpRequest的详细示例，包括无请求体和有请求体时如何设置请求头和发送JSON数据。

通过浏览器发送post请求有两种简单的方式，你只需要根据实际情况在console执行以下代码即可。

使用示例

在这里插入图片描述
也可以直接在network查看接口请求

代码

没有请求体，可以直接进使用以下方式，url需要换成你自己的地址，简单方便

fetch(new Request('http://test.com',{method:'POST'})).then((resp)=>{console.log(resp)})

有请求体，且需要设置请求头可以使用以下方法,url和param的内容换成你自己的参数即可

var url = "https://test.com";
var params = {
    "roleIds": ["4"],
    "reason": "test apply role auth",
    "expireTime": 1702018523000
};
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(JSON.stringify(params));