Ant-design-pro: 表单提交，body问题

[kuayee]

表单提交 ，Content-Type: "application/x-www-form-urlencoded"。

调用fetch，options参数如下，
body : "j_username=admin&j_password=1"
headers:{Content-Type: "application/x-www-form-urlencoded"}
method:POST

但是后台接收到的参数却是下面形式
{"j_username":"admin","j_password":"1“}=

明明是键值对，怎么到了后台，所有的参数都变成了key，而value是空呢？

[chenshuai2144]

你用postman之类的工具试一试。
估计是你后台的问题

[wunayou]

这个问题 第一步 看一下浏览器发送过去数据是怎么样的，就可以判断后台的问题，那是你发送的数据有问题，个人认为你的格式错了

[kuayee]

@chenshuai2144 ，thanks.
同一个接口，postman，可以正常发送并返回

数据。
但是从前端发起的请求，就不行，截图如下：


后台拿到的数据，如下图：

[kuayee]

@wunayou ,thanks ~
仔细调试过很多次了，前端显示的body，就是键值对，如下：
body : "j_username=admin&j_password=1"
但是经fetch发送之后，就是下图这样的。

[kuayee]

困扰了2天了这个问题，为此还翻出之前刚接触dva时候的一个项目，调用的也是这个接口。发现dva项目可以正常，但是pro项目就不行。两个前端访问同一个后台。

dva项目截图如下：

pro项目截图如下：

[wunayou]

这个东西 不需要debugger 直接查看 network xhr 请求的信息 你应该是那里没有写对 把 Content-Type所有配置信息都删除 看一下

[kuayee]

@wunayou ，补充chrome截图：

[kuayee]

换个角度讨论一下这个问题，pro项目怎么发起表单提交。我先说一下我改的代码，大家看看有什么问题：

1，修改api.js，如下图：

2，修改request.js，否则会把参数格式化，如下图：

3，关闭mock，保证请求打到自己的后台。

经过以上3步后，我从后台调试，抓到的参数，如下图：

从上图足以说明，一定是是前端发送数据有问题，但是到底前端该怎么写呢，望赐教~

[kuayee]

诡异的是，从chrome控制台并看不到有什么问题呢，请大神帮忙

[chenshuai2144]

这明显是你后台的问题吧。。。。
你用的Struts？ 你看看配置他是不是强制走了json

[wunayou]

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
    extended:true
}));
app.post('/urlencoded', function(req, res){
    console.log(req.body);
    res.send(" post successfully!");
});
app.listen(3000);

自已搭一个环境 看一下 network没有问题 就没有问题 就是后端的问题

[kuayee]

@chenshuai2144 , 肯定不是后台的问题啊，postman 请求就没有问题啊

[kuayee]

@chenshuai2144 ,为什么要关闭讨论呢？问题没有解决啊

[chenshuai2144]

好好看看你的后台吧。。
chrome控制台一切正常。不行你就用json不要用key=value了

[dengfuping]

@kuayee The body of post request should be JSON object, not key-value string.

[Aruna1990]

@kuayee 这个问题怎么解决的，我也碰到了这个问题，求助

[luckycuiying]

我也碰到了，求解，。。。。。

[wunayou]

我的邮箱为什么接到这些东西啊

这么简单问题

1使用POSTMAN测试是不是后端的问题
2然后看network传送的参数 与 POSTMAN有什么区别
3找到区别就改就要可以啊

[wohaiwo]

与后台开发进行联调的时候 请把mock 代理关闭 当前的问题是因为mock会包一层 {} 上去导致的

[superhos]

同樣遇到這個問題了，看了下request.js。

if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
    if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
      };
      newOptions.body = JSON.stringify(newOptions.body);
    } else {
      // newOptions.body is FormData
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers,
      };
    }
  }

上面大部分遇到這個問題的人應該參數傳的是"key=value"的字符串吧，這部分代碼會把這個字符串直接當做非FormData對象處理，然後在下面會進行JSON序列化。字符串通過JSON.stringify()序列化會多加了一個雙引號，後台自然讀不出來了，例如：
JSON.stringify('a=b') => '"a=b"';

參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

解決方案的話修改request多判斷下是否是鍵值對，或者後台讀的時候線刪掉前後雙引號吧。

[fucaobao]

@kuayee 我也遇到了，怎么解决，求助ing

[shaopeng1]

@kuayee 你用的后台是struts2？

[nihaojob]

我也遇到了，用postman发送正常，用浏览器后端就解析不了，在后端打印了一下日志，原因是序列化格式不对，多了单引号，使用application/x-www-form-urlencoded的时候用qs.stringify格式化下就可以了。

import qs from 'qs';

 if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
      };

      // 主要是这段  
      // --------------Start--------------
      const ContentType = newOptions.headers['Content-Type'];
      if (ContentType && ContentType.indexOf('application/x-www-form-urlencoded') !== -1){
        newOptions.body = qs.stringify(newOptions.body);
      }else{
        newOptions.body = JSON.stringify(newOptions.body);
      }
      // --------------end--------------

    } else {
      // newOptions.body is FormData
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers,
      };
    }