Axios: PUT 和 PATCH 发送 application/x-www-form-urlencoded 数据

我尝试使用 formData，但这仍然像 chrome 中的 body 标签一样发送，而不是 formData。

标头

PUT /url/path HTTP/1.1
Host: hostname
Connection: keep-alive
Content-Length: 1234
User-Agent: Mozilla/5.0 
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryJsCvT2m1SBzbA23B
Accept: application/json, text/plain, */*
Referer: URL
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

有效载荷

Content-Disposition: form-data; name="firstname"

Daniel
------WebKitFormBoundaryJsCvT2m1SBzbA23B
Content-Disposition: form-data; name="surname"

Persson

代替

标头

PUT /url/path HTTP/1.1
Host: hostname
Connection: keep-alive
Content-Length: 1234
Accept: */*
Origin: http://adminhost
User-Agent: Mozilla/5.0
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: URL
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

表单数据

firstname=Daniel&surname=Persson

如果这不应该是标准的，那么我认为它至少应该是作为表单数据发送的选项。

做了一个小工作来为我解决这个问题。

      config['transformRequest'] = [function (data, headers) {
        var str = [];
        for(var p in data)
          if (data.hasOwnProperty(p) && data[p]) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(data[p]));
          }
        return str.join("&");
      }];

也遇到了这个问题，感谢解决方法：+1：

@kalasuffar我们可以关闭它吗？

@mzabriskie

你好。

我目前没有使用 axios 处理项目，所以我无法验证新版本是否解决了问题，但解决方法目前对我们来说很好。

如果问题得到解决，则关闭。 如果不是，那么也许记录一个解决方法，这样其他人就不必寻找这篇文章了。

但我不介意结束这个问题。

最好的祝福
丹尼尔

包含上述序列化代码的axios怎么样，所以application/x-www-form-urlencoded的Content-Type在传递对象时会触发正确的编码？

axios.post(
  '/foo',
  { some: 'data' },
  { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
);

…应该开箱即用恕我直言。 还是我错过了什么？

:+1: 用于在设置标题时支持 x-www-form-urlencoded

+1

只需在此处添加一些现有技术即可。 请求库对body 、 form （urlencoded，我们在这里讨论的内容）和formData （多部分表单上传）使用不同的键。 这迫使用户知道这些需要不同并做出选择。 我希望 axios 只是根据内容类型选择一个合理的默认值，但如果有人依赖旧的实现，这可能是一个重大变化。

@jimthedev您可能是对的，我选择了错误的数据对象类型。

但我觉得奇怪的是，一个简单的 GET 和 POST 以查询方式给了我简单的表单信息

?ab=CD&ef=gh

使用默认发送。 但是 PUT 和 PATCH 将默认值更改为多部分数据。

@kalasuffar哦，我明白了。 是的，这看起来很奇怪。

+1 x-www-form-urlencoded

好的

是否有兴趣将一流的 urlencoded put/post 支持烘焙到 axios 中？

是的

+1

+1

+1

+1

+1

我认为这应该通过添加对URLSearchParams的支持来解决。 顺便说一句，这最近已在 fetch 中实现： https ://github.com/github/fetch/commit/d77810a15c78bbbaf2defd4ea3af6db21c8d117f

唯一的问题是并非所有浏览器都支持 URLSearchParams，但是有一个 polyfill。

+1

很高兴看到这正在进行中

axios v0.12.0 支持URLSearchParams ，可用于从浏览器以 application/x-www-form-urlencoded 形式发送数据：

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params); 

请注意，并非所有浏览器都支持URLSearchParams ，因此您可能需要对其进行polyfill 。 （确保将 polyfill 添加到全局范围。）

+1 我也真的需要这个，如果“urlencoded”可以在 AXIOS 中仅基于 Content-Type 工作，那就太好了。

+1 它应该由图书馆处理。 数据参数应该只是对象，我们不想关心它是哪种请求类型。

+1 仍然有这个问题。

+1
我使用了推荐的URLSearchParams polyfill 。 使用IE11时似乎仍然存在问题。

编辑：
该问题是由于在将 axios 配置对象提供给 axios 进行请求之前克隆了它。 如果配置对象包含使用推荐的 Polyfill 在 IE11 中用于数据的 URLSearchParams 实例，则克隆对象中的 URLSearchParams 实例不会正确克隆。 它不再是 URLSearchParams 实例。

@kalasuffar改进您的函数以解析对象
axios.post(url, { user: { name: 'john' }}, ...)将被编码为user[name] = john

function jsonToFormEncoded(data, headers) {
  var str = [];
  for(var p in data){
    if(_.isObject(data[p])){
      var d = data[p];
      for(var o in d){
        if (d.hasOwnProperty(o) && d[o]) {
          str.push(p+'['+encodeURIComponent(o) + "]=" + encodeURIComponent(d[o]));
        }
      }
    }else{
      if (data.hasOwnProperty(p) && data[p]) {
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(data[p]));
      }
    }
  }
  return str.join("&");
}

有同样的问题。 使用 OWIN 中间件，并且由于 axios.put 请求发送原始 JSON，我无法正确处理它。

还是有问题。 很惊讶自从它有这样一个核心功能以来它还没有被修复？

+1

这件事真的很烦人。 必须安装一个 polyfill 似乎太多了，Axios 应该透明地处理这个问题。 此类问题使人们转而寻找其他库。

我使用这个拦截器，效果很好。

Vue.axios.interceptors.request.use((config) => {
    if (config.headers['Content-Type'] && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      config.transformRequest = (data) => {
        const str = [];
        Object.keys(data).forEach(key => str.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`));
        return str.join('&');
      };
    }

    return config;
  }, error => Promise.reject(error));

@kalaspufar -s 代码作为默认配置，谢谢它现在可以使用！

```

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [函数（数据，标题）{
变量 str = [];
for（数据中的变量 p）
if (data.hasOwnProperty(p) && data[p]) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(data[p]));
}
返回 str.join("&");
}];

一年后，它仍然是问题。 （为什么它被关闭了？）

甚至 URLSearchParams 也没有涵盖整个问题。

现在我想通过 PATCH 发送 FormData 对象。 我该怎么办？

很多年前，jQuery 就从盒子里得到了这个。 但是axios无法识别formData