Question

正在处理我的第一个MERN堆栈应用程序。我正在尝试从React客户端（端口 3000 ）向MongoDB API（端口 3001 ）发出axios发布请求。我的帖子请求代码是：

<button
        onClick={() => {
          axios({
            method: "post",
            url:
              "http://localhost:3000/api/update/documentID",
            data: { newNumber: 12345 },
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
          });
        }}
      >
        Click to run axios post request
</button>

这会导致在我的端口3001服务器上显示以下内容：

body: { '{"newNumber":12345}': '' }

我在我的端口3001服务器上安装了我的React代理服务器并安装了主体解析器。我可以使用Postman提出确切的要求。我也可以通过用Form替换React中的Button来获得我想要的东西，但是显然必须提交一个表单来发出发布请求并不理想。

（此外，如果我尝试使用axios.post（etc）而不是axios({ method: post, etc.)，那么我最终会得到一个完全空的正文。

任何帮助将不胜感激。

Answer 1

回答了我自己的问题，改变了

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        width: 100%;
        height: 100%;
        margin:0px;
        paddin:0px;
      }
      #map_canvas{
        width:600px;
        height: 445px;
      }
      .gm-style-cc {
        display:none;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

到

headers: { "Content-Type": "application/x-www-form-urlencoded" }

它奏效了。

来自Axios的post请求来自react结果导致正文为空或怪异

1 个答案: