JS前后端分离的问题

Question

 var dataParts = []; 
  var element;
  for (var i=0; i<whichform.elements.length; i++) {
    element = whichform.elements[i];
    dataParts[i] = element.name + '=' + encodeURIComponent(element.value);
  }
  var data = dataParts.join('&');

  request.open('POST', whichform.getAttribute("action"), true);
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

... ...

  request.send(data);

这里前端发送了 request.send(data); 是以post方式发送的，可是在chrome里面成了get:

Request URL: chrome-extension://nomaldfgdgflabblehodgbigepojdcdl/adapter.js
Request Method: GET    // 这里怎么会成了 GET?
Status Code: 200 OK
Referrer Policy: strict-origin-when-cross-origin

我怎么去获取请求体中的具体信息？ 然后去写对应的后端代码？

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

问题分析：

从代码中看，前端代码应该是正确的，而且使用的是POST方式发送数据。但是在Chrome控制台中看到请求变成了GET方式，且请求URL成了chrome-extension://nomaldfgdgflabblehodgbigepojdcdl/adapter.js，这显然是不正常的。

解决方案：

1.检查chrome浏览器是否存在拦截插件，如AdBlock、uBlock等，可能会拦截POST请求。

2.检查请求的URL是否正确，容易出现拼写错误或者路径错误等问题导致请求URL不正确。

3.调试后端代码，确保后端能够正常接收数据。你可以使用一些工具，比如Postman等模拟发送POST请求来测试后端是否正常接收数据。

4.修改前端代码来发送GET请求，通过查询字符串的方式来传递参数。参考代码如下：

var data = dataParts.join('&');
request.open('GET', whichform.getAttribute("action") + '?' + data, true);
request.send();

5.在前端代码中增加调试信息，来查看是否有其他异常情况。例如，你可以在控制台使用console.log()来输出日志信息，以帮助你定位问题。

6.修改浏览器设置，禁用缓存，重新打开浏览器再试一遍是否能解决问题。

7.重启计算机，再次进入浏览器试一下。

总结：

根据问题的提示，可能的原因有很多，需要从多个方面进行排查。修改代码和调试是解决此类问题的常用方法。