Axios: 内容类型应用程序/x-www-form-urlencoded

正如您所展示的那样，这应该可以工作。 听起来像一个错误。 我会仔细看看的。

原因是拦截器。 只有当我使用拦截器时，我才能发送具有该 Content-Type 的请求。

这是我的代码：

axios.interceptors.request.use(function (config) {
        var token = LoginStore.getJwt();
        if (token) {
            config.headers["Authorization"] = "Bearer " + token;
        }

            return config;
        }, function (error) {    
            return Promise.reject(error);
        });

在拦截器内部，我可以看到“Content-Type”标头，但它没有发送到服务器。
我是否正确使用拦截器？

对此有何更新？ 我有同样的问题。 Axios 不发送我设置的标头。

这似乎是罪魁祸首→ https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

知道为什么在发送请求之前删除了Content-Type标头吗？

一种解决方法是在发出 axios 请求时将data更改为data || {} 。 这将确保数据不是未定义的。

当requestData为undefined $ 时，删除Content-Type的逻辑似乎出现在此提交https://github.com/mzabriskie/axios/commit/9096d34186d5a5148f06c07854b21d6cc8035e96 中。 但是，没有迹象表明为什么要添加它。

如果requestData是undefined并且方法是PUT ， POST或PATCH并且没有Content-Type ，我会投票已设置，则默认Content-Type为application/x-www-form-urlencoded 。 否则，只需尊重已指定的任何内容。

@mzabriskie但是在@alborozd提供的代码片段中， data设置为Querystring.stringify({...}) ，所以requestData不应该是undefined ，对吧？

@mzabriskie我认为你是对的。 当我使用请求拦截器时，提琴手显示数据为空。 没有拦截器，我可以看到数据和标题，它工作正常。

因此，当您使用拦截器时，可能会出现问题。

不需要拦截器来崩溃这个东西。 我已将内容类型标头默认设置axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; ，并且我无法在 POST 正文中发送任何有效负载。

我使用了 URLSearchParams 的解决方法：

    var params = new URLSearchParams();
    params.append('email', email);
    return (dispatch) => {
        axios.post('/stack/' + uri, params)

但这不受 Safari 和 IE 的支持。

编辑：好的 :) 解决方法的下一个更新。 完全支持的解决方法是将数据作为查询字符串发送。
data: "flashcard=" + JSON.stringify(flashcard) + "&stackUri=" + stackUri 。 很痛，但很有效👍

您可以改用 qs 之类的库：

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

这不是解决方案。 如果我使用"Querystring"或"qs"有什么区别？ 问题是由于拦截器，标头['Content-Type'] = 'application/x-www-form-urlencoded'为空。

这里有更新吗？ 因为我今天在研究为什么我的 POST 不影响 API 时损失了 1 小时（直到我提醒了那个问题）......或者没有计划解决这个问题，最好去其他地方？

我也有同样的问题。。。还在等修复。。。

请重新打开@nickuraltsev ，因为您的解决方案无法解决此问题。

+1 问题。

我使用带有 qs 库的拦截器来解决这个问题。 对我来说很好。

import qs from 'qs';

axios.interceptors.request.use((request) => {
  if (request.data && request.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      request.data = qs.stringify(request.data);
  }
  return request;
});

+1 问题。

hyanmandian 于 14 小时前发表评论
我使用带有 qs 库的拦截器来解决这个问题。 对我来说很好。

太好了，但这不是通过安装另一个解决图书馆问题的方法恕我直言。

您可以在配置中添加一个data: {} ，因此拦截器不会跳过我们指定的标头。

这就是我所做的，它对我有用：

import request from 'axios'

export const playSound = (soundFile) => (dispatch) => {
    dispatch(playSoundPending());
    return request
    .get(`/play/audio/${soundFile}`, { headers: {'Content-Type': 'audio/x-wav'}, data: {} })
    .then(response => response.data)
    });
};

这将网络选项卡中请求标头中的Content-Type从application/json更改audio/x-wav 。

这已经修复了吗？ 我似乎无法使用此处发布的任何解决方案设置我的 Content-Type。

我有同样的问题，有帮助吗？

我使用encodeURIComponent解决了这个问题：

静态getToken（用户名，密码）{
返回 axios({
方法：'发布'，
url: '端点',
数据： Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

撞。 人们肯定会假设，如果设置默认值，它们将始终受到尊重。 Axios 肯定会忽略某些情况下的默认值，从而给穷人带来问题。

这是发生这种情况的更具体的合并： https ://github.com/mzabriskie/axios/pull/195/files

对此问题 +1。
花了 3 个多小时试图找出我的 Tomcat 配置出了什么问题，显然我的标头在前往服务器的途中被盗了。 变通办法没有帮助。 上帝保佑头球！

@polyakoff你是如何解决这个问题的？或者你仍然被困住了。 我观察到的是这个问题间歇性地发生

@usopan仍然卡住。

作为一种解决方法，我针对这个特定的请求使用了 isomorphic-fetch。
在大多数浏览器上似乎都可以正常工作，但在某些 Safari 版本上仍然无法正常工作。
我开始认为 Safari 把我搞砸了。

对此问题 +1。

我找到了解决方案。 解决方法是检测浏览器。
在 Chrome 中使用 - https://github.com/ljharb/qs将 json 数据解析为字符串并设置 Content-Type 标头
在 Safari 中使用 - FormData 作为正文并且不设置任何 Content-Type 标头

无法想象像这样的问题如何已经超过半年没有得到解决。

哇好问题！ 还在等更新☕️

糟透了。

糟透了 + 1

+1

+1

+1

+1

+1

+1

+1

+1

+1

常量查询字符串 = 要求（'查询字符串'）；

登录（）{
var _this = 这个；
这个.$http({
网址：网址，
方法：'发布'，
数据：querystring.stringify({
电子邮件：电子邮件，
密码：通过
}),
标题：{
“内容类型”：“应用程序/x-www-form-urlencoded”
}
}).then(函数（响应）{
控制台日志（响应）；
}).catch(函数（错误）{
控制台日志（错误）；
});
}

+1

+1

+1

所以总结一下，使用Content-Type: application/x-www-form-urlencoded发送的任何请求是：

• 不自动编码有效载荷
• 即使已指定标题，也未设置标题

目前，解决方法是设置data: {}以便设置标头，并手动编码请求数据有效负载

我正在分享我的代码：

import qs from 'qs'
...

const instance = axios.create({
  baseURL: config.api.host,
  responseType: config.api.responseType,
  timeout: config.api.timeout,
  data: {},
})

instance.interceptors.request.use((req) => {
  if (req.method === 'post') {
    req.headers['Content-Type'] = config.api.defaults.postContentType
    req.data = qs.stringify(req.data)
  }

  return req
}, (error) => Promise.reject(error))

这似乎对我有用

大家好！ 我想知道，我应该创建一个分支并使用小型原生查询解析方法提供解决方案吗？ 对于创作者来说，这会是一个好的“模式”吗？ @mzabriskie你想整合这样的东西吗？

花了 3 个多小时来解决这个问题。 @Maxwell2022你能用一些示例数据编码吗？

+1

1

+1

@bsjaffer我已经发布了代码示例，你还想要什么？

@Maxwell2022我现在很好。

+1

+1

+1

+1

+1

+1

+1

++1

就这么做吧，希望对你有帮助。

let details = {
      key1: 'data1',
      key2: `data2`,
      key3: `data3`,
    };

    var formBody = [];
    for (var property in details) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    const URL = `PUT-YOUR-API-URL-OVER-HERE`;
    return axios({
      method: 'POST',
      url: URL,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      data: formBody,
    })
    .then(res => res.data)
    .catch(error => { throw error });

+1

是的，你猜对了，+1

+1

+1

+1，reznord 的解决方案很神奇（在标题旁边设置数据）：
const config = { headers: { 'Content-Type': 'multipart/form-data' }, data: {} };

@bruddah很酷，很高兴它起作用了。

_使用FastHub从我的 OnePlus ONEPLUS A3003 发送 _

+1

使用 qs 为我工作！

在 React 中，这对我有用：

import axios from 'axios';
import querystring from 'querystring';

const data = querystring.stringify({id:32, name:'john'});
axios.post('http://example.com/posturl', data)

原因是axios在将post数据添加到HTTP请求的body之前并没有自动编码，所以需要在发送请求之前进行编码。 这就是查询字符串的作用。 它需要{id:32, name:'john'}并产生类似id=32&name=john的内容，然后 axios 将其设置为发布请求的主体。

您可以通过发出以下请求来测试它：

axios.post('http://example.com/posturl', 'id=32&name=john')

这应该与上面的代码具有相同的结果。

自开业以来一年多仍未修复....

+1

+1

大家好！ 你可以试试这个，它对我来说很好，但我不知道为什么。

get (url, data) {
    return axios({
      method: 'get',
      url: url,
      baseURL: 'http://xxxxx/api',
      timeout: 10000,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },//this is important !
      data: data,//this is important !
      params: data//this is important !
    }).then(
      (response) => {
        console.log(response)
        return checkStatus(response)
      }
    )
  }

尝试在补丁请求中发送_Content-Type:application/json-patch+json_ （遵循RFC6902 ），
以下对我有用（我在请求标头中有正确的类型）：

axios.patch(
          url,
          data,
          { headers: { 'Content-Type': 'application/json-patch+json;charset=UTF-8' } }  
          ))

对于那些因为拦截器覆盖仅在拦截器中使用的标头而遇到此问题的人：

config.header['yourheader'] = value;

代替

config.header = {'yourheader': value}

@DavidJiang7解决方案应该有效

这对我有用：

static register(token, email, lang)
{
        let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }; // we do it to send SIMPLE post eequest (to avoid send CORS OPTIONS request before post)
        let params = new URLSearchParams(); // and we cannot send json but params are transform to  url-style
        params.append('email', email);
        params.append('lang', lang);

        return axios.post(ENV.API_URL + '/device/' + token + '/register', params, config);
}

有趣的图片在这里展示了 CORS 案例。 当我们发送 SIMPLE 请求时，不会发送 OPTIONS 请求。 简单请求是 GET、HEAD、POST 请求，并且标头“内容类型”等于application/x-www-form-urlencoded 、 multipart/form-data或text/plain以及任何自定义标头。

就这样做

const data = {name: 'my name'}
const form = 'data=' + JSON.stringify(data)
axios.post('/my_url', form)

已编辑
抱歉错字。 它对我有用，我已经使用了几个月。
我忘了提到在服务器中你只有data参数

...
 $data = json_decode($_POST['data'], 1);
 echo $data['name']; // my name
...

争取一个干净的解决方案，也愿意提供帮助。

@jesusantguerrero
就这样做

const data = {name: '我的名字'}
const 形式 = 'data=' + JSON.stringfy(data)
axios.post('/my_url', 表单)

不起作用，但上面的JSON.stringify ^^typo 。

对于那些使用 Node.js 的人来说，这是可行的。 感谢线程中的每个人，我基本上结合了一堆人的解决方案并参考了 Node.js 文档

这是我能想到的最干净的。

import { URLSearchParams } from 'url';

async function auth() {
  try {
    const config = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    };
    const params = new URLSearchParams();
    params.append('grant_type', 'client_credentials');
    params.append('client_id', configuration.yelpClientId);
    params.append('client_secret', configuration.yelpClientSecret);

    const { data } = await axios.post(
      YELP_AUTH_ENDPOINT,
      params.toString(),
      config,
    );

    return data;
  } catch (error) {
    console.log(error.response.data);
    return {};
  }
}

使用参数而不是数据

axios({
    method: 'post',
    url: '/my/api',
    headers: {
        'Content-type': 'application/x-www-form-urlencoded'
    },
    params: {
        'grant_type': 'code',
        'client_id': '1231453',
        'client_secret': 'THIS_IS_THE_SECRET'
    }
})
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    }
);

@skuarch
使用参数而不是数据

如果可行，它是迄今为止最干净的解决方案。

@oshalygin它将参数设置为查询字符串，不作为发布变量发送。

无法发布简单表单的 ajax 库？ 真的吗？

1

任何人都知道谁将内容类型设置为 application/json。

axios.post(`${DOMAIN}${url}`,params, {'headers': {"Content-Type": "application/json;charset=UTF-8"}})

它不起作用。

@hellomrbigshot可能是 CORS 问题（阅读它，也在这个线程中）

对我来说，Axios 中的麻烦代码（在不使用 URLSearchParams 的情况下无法正确获取有效负载）似乎是

        if (utils.isURLSearchParams(data)) {
          setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
          return data.toString();
        }
        if (utils.isObject(data)) {
          setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
          return JSON.stringify(data);
        }
        return data;
      }

因此，如果data是一个不是 URLSearchParam 的对象（或在此之前检查的其他几种类型之一 - FormData 在列表中并使用原始），那么它将是 JSON.stringified并可能导致标头设置为 application/json。
另一方面，如果我传入一个字符串，那么它就按原样使用，所以 adeelibr 的 7 月 4 日评论是对我和我的表单数据有效的评论。

它们应该提供默认的标头类型。 我通过使用此代码解决了这个问题。
这是我在客户端的 vue + axios 代码

Vue.prototype.$http = axios;
new Vue({
    el: '#root',
    data: {
        site_url: params.site_url,
        name: '',
        description: ''
    },
    methods:{
        onSubmit(){
            var url = this.site_url + 'project/create';
            this.$http.post( url, {
                name: this.name,
                description: this.description
            } ).then(
                response => console.log(response.data)
            );
        }
    },
    mounted(){

    }
});```
Here this.$http means axios. I using axios instead of vue resource.


My Server Side Code

if ( isset( $_POST ) ) {
$fields_to_add = array('name', 'description');
$response = json_decode(file_get_contents("php://input"), true);
foreach ( $response as $k => $v ) {
如果（in_array（$k，$fields_to_add））{
$_POST[$k] = $v;
}
}
回声 json_encode( $_POST );
出口（）;
} 别的{
echo json_encode(array('message' => '无效请求'));
出口（）;
}
```

将字段名称作为字段名称列表。 它会自动将其转换为帖子
希望这可以帮助

+1

+1

+1

OMG 😱 我不知道发送带有一些 application/x-www-form-urlencoded 表单数据的 POST 请求是如此复杂。 我必须多次重新阅读自述文件，并且错误地理解配置的数据字段可以与 qs.stringify() 一起使用，也可以与 params 字段一起使用。

目前，似乎只有实例方法支持发送 x-www-form-urlencoded 表单数据，例如：

• axios#post(url[, data[, config]])
• axios#put(url[, data[, config]])
• axios#patch(url[, data[, config]])

+1

没有解决！

它像……永远一样开放。 旧的请求库曾经使它变得如此简单。

+1

+1

+1

这是一个简单的方法来做到这一点。
首先，请阅读这里： https ://github.com/axios/axios#using -applicationx-www-form-urlencoded-format

这是一个修复：

1. 转到： https ://github.com/WebReflection/url-search-params

2. 您可以 npm 安装它或简单地从这里下载库： https ://github.com/WebReflection/url-search-params/blob/master/build/url-search-params.js

3. 如果您已下载该库，只需将其包含在您的文件中即可。

//For e.g. in your index.html, 
<script src="url-search-params.js"></script>

1. 然后发出这样的 POST 请求：

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params)
.then(function (response)
                {
                    console.log(response.data);
                })
                .catch(function (error)
                {
                    console.log(error);
                });

它会像魅力一样工作！ :+1:

@aditya43谢谢！

您实际上也可以这样做。 这直接来自 axios Github Page。 您必须自己创建编码的 URL，但我刚刚对其进行了测试，它可以工作。

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

这个bug还在，有更新吗？

@DZuz14我试了一下，还是不行。 使用 axios 全局变量，每个实例，什么都没有。
它似乎是硬编码的。

+1

axios很烂，使用请求更换

+1

这是工作！

https://www.npmjs.com/package/form-data-urlencoded

import getFormData from 'form-data-urlencoded';

let data = getFormData({"_csrf": 'wrwrwrvwg4657rhed4hehe4',
                            "Res1[Test1]": "segf96767", 
                            "Res2[Test2]": "hello"});
let options = {
     method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
    url: 'http://fhfhfhfh/455454545/fhfhfhf',
    data
};

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios(options).then(function (response) {
              console.log(response);
    }).catch(function (error) {
             console.log(error);
        });

我在“Content-Type”中定义了字符集（UTF-8），并修改了上面的“拦截器”解决方案。
最后它起作用了。

import axios from 'axios'
import qs from 'qs'

axios.interceptors.request.use((request) => {
  if (request.data && (request.headers['Content-Type'].indexOf('application/x-www-form-urlencoded') !== -1)) {
    request.data = qs.stringify(request.data)
  }
  return request
})

axios({
  method: 'POST',
  url,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  data
}).then(() => {
// DO SOMETHING
})

我发现只有cors的情况下，发送options request headers set cross-domain failure的失败，后面的操作不会执行。

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

我从 axios 开始，因为我的一位同事向我推荐了它，而我的第一个努力是从有效的 API 获取访问令牌。 我遇到了这个错误，然后我回到了 jQuery，（老实说，我对 jQuery 很热，但它是被迫这样做的）。 所以我认为没有比这个旧的、未解决的错误更好的方法让人们逃离这个图书馆。

我感谢在这个库中所做的所有工作，作为一名开发人员，我知道创建一个库不是一项简单的任务，我希望有一天能让 jQuery 失望并再次回到这里。

@HakamFostok我在生产中成功使用 github/fetch 来获取 api 令牌，您可以探索它作为 jquery 的替代方案。
https://github.com/github/fetch

@usopan非常感谢，我去看看

@HakamFostok
克服此错误的最简单方法是使用 QS。 您不必安装 qs 只需将其直接与 qs.stringify 一起使用

let qs = require('qs');
let result = await axios.post(url,
    qs.stringify({
        refresh_token: refresh_token,
        grant_type: 'refresh_token'
    }),
    {
        headers: {
            "Content-Type": "application/json"
        },
        auth: {
            username: 'username',
            password: 'secret'
        }
    });

有了它，您可以使用 ES6 更好的 axios ;)

但你是完全正确的。 这个错误应该在很久以前就已经解决了。 不知道是什么让他们这么久。

@HakamFostok @Silve2611我确认 qs 解决方法有效，我用它在这里获取令牌： https ://github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

是的，'qs' 解决方法正在工作，但是，问题是我没有在项目中使用'qs'。 无论如何感谢您的帮助，我最终扔掉了这个库并使用了 ajax 库https://github.com/fdaciuk/ajax它好多了，我鼓励大家摆脱这个库并迁移到那里。

qs每月下载近 6000 万次，压缩后为 4.8Kb。
Express、body-parser、request、superagent 等很多都依赖于它，你可以毫无顾忌地将它添加到你的项目中。

@HakamFostok据我所知，它是核心模块的一部分，因此如果您的节点版本是最新的，则不必手动安装它。

我只是不想安装任何我不需要的库，只是为多年前应该解决的问题创建一个解决方法。 仅供参考，我的项目不是 React 项目，也不是我使用节点，我正在使用 ASP.NET MVC 和 vue.js

“querystring”模块是内置的，据我所知，它也是如此。

@axios这个持续存在的错误呢？

@HakamFostok我也在使用 vue，它确实与 axios 完美配合。 考虑使用 qs，因为如果你想使用 async await，axios 有很多优势。

问题仍然存在，我必须像这样手动使用 qs

axios.post(
      "connect/token",
      qs.stringify({
        username: this.state.username,
        password: this.state.password,
        grant_type: "password",
        scope: "offline_access"
      })
    );

这真的是一个错误吗？ 我正在使用 axios 在两个不同的项目中进行 url 编码，它工作得很好。 我之前在这里发布的评论是我唯一设置的，并且有效。

当然是bug！ 它不像文档中描述的那样工作。 此外，为应该由 axios 明确处理的事情添加额外的步骤也没有任何意义。 其他方法不需要该步骤。

是的，当您必须添加加法步骤时，它没有意义。
如果我想发帖

headers: {
     'Content-type': 'application/x-www-form-urlencoded'
}

我必须这样写

axios.post(
      "connect/token",
      qs.stringify({
        username: this.state.username,
        password: this.state.password,
        grant_type: "password",
        scope: "offline_access"
      })
    );

我在将Content-Type设置为application/vnd.api+json时遇到了同样的问题，类似于 #340，不幸的是，它没有解决就关闭了。

我的解决方法是对对象数据进行字符串化以发送Content-Type ，这有点棘手，因为在处理它时我们必须处理 axios 设置application/json;charset=utf-8的方式对象数据。

希望我们有更多的手动设置Content-Type的能力，而不是让 axios 为我们“猜测”它。

它应该为我们“猜测”它或抛出一个我们可以处理的错误。 目前一切看起来都很好，但参数显然不正确。 使用 axios 的初学者将无法追踪此类错误。 至少它应该被正确记录。

+1 刚刚花了 2 个小时来跟踪这个问题。 至少会在自述文件中获得更好的解释/说明。 如果 qs 解决了问题，将更新。

更新：使用反应，qs 为我工作。 这是我的解决方案。 在我的情况下，我需要表单参数和查询参数。

var data = qs.stringify({
    id: 'MY_ID',
    action: 'MY_DATA'
});
var params = {
  params: {
    token: 'MY_TOKEN'
  }
};
axios.post('MY_URL', data, params)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

我需要使用 Axios 和 React 来执行登录过程，在为这个问题挣扎了几个小时之后，解决方案是独立创建发出请求所需的对象。

错误是： unsupported_grant_type

这项工作。

import axios from 'axios';
import qs from 'qs' ;

const endPoint = `${endPointApi}/ControllerX`;  

const data = qs.stringify({ 
    grant_type: 'password',            
    user: userName, 
    password: userPass
});

const headers = {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};

axios.post(endPoint, data, headers)
.then(function (response) {
    debugger;
    console.log(response);
})
.catch(function (error) {
    debugger;
    console.log(error);
});

这种其他方式行不通。

axios.post({
    url: endPoint, 
    data: data, 
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})...

@harvic3你可以检查我的工作代码。 你也不需要特定的标题。

https://github.com/Awesome-CMS-Core/Awesome-CMS-Core/blob/master/src/AwesomeCMSCore/AwesomeCMSCore/React/js/App/Modules/Account/LoginForm.jsx#L40 -L79

2年后，此错误仍未解决

+1

+1

+1 还是有问题

+1

+1
平@mzabriskie @nickuraltsev

nodejs 方面的问题是其中一个依赖项follow-redirects正在删除内容类型标头：

https://github.com/olalonde/follow-redirects/blob/1b6340f83ad5596a0a38c16a7113692bd90301f2/index.js#L188 -L192

+1 在这里肯定遇到同样的问题

+1

最终解决这个问题，不要将黑客用作 qs（但是是的，qs 有效）

海吉

1. 2018 年少校 23.31 skrev“列昂尼德 Ershov”通知@github.com：

最终解决这个问题，不要将黑客用作 qs

—
您收到此消息是因为您订阅了此线程。
直接回复此邮件，在 GitHub 上查看
https://github.com/axios/axios/issues/362#issuecomment-390337824或静音
线程
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
.

好像这个问题不会解决

开始变得可笑了！

甚至没有一句“去你妈的，我们永远不会解决这个问题！” ：/

+1

+1

似乎某个英雄修复了它并创建了一个特定版本“aaxios”
允许设置内容类型
虽然没有测试，但继续获取

+1

+1

+1

+1

👍
正如@camposjorge所说，由于https://github.com/axios/axios/pull/1544 ，我们可能会看到一个修复（很快？）

没有修复？

+1

解决了！ 这不是 axios 的问题，只是关于交叉原点

设置 { headers: {'Content-Type': 'application/x-www-form-urlencoded; 字符集=UTF-8'}}
和
只需使用 axios 选项中的 transformRequest

转换请求：[函数（数据）{返回格式（数据）}]，

用于将 {a:"a",b:"b"} 解析为 "a=a&b=b" 的格式函数

+1，上述解决方案均无效

+1

似乎很多人仍在等待这个问题的解决方案，包括我自己——当然，毕竟这段时间肯定有一些建议的解决方案。

在反应中用 qs.stringify 修复了这个问题。

你只需要在将数据传递到 axios.post 之前对数据进行 qs.stringify

问题是默认情况下，CSRF Token 被注册为 Axios 的公共标头，所以
解决这个问题

1-在 bootstrap.js 中替换这些行“

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

让 token = document.head.querySelector('meta[name="csrf-token"]');

如果（令牌）{
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} 别的 {
console.error('找不到 CSRF 令牌：https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
"
通过这一行“
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"
2- 通过 npm 安装qs模块点击这里

3-定义qs的const，如下所示：
常量 qs = 要求（'qs'）；
4-像这样默认使用axios：
axios.post('你的链接在这里',qs.stringify({
'a1': 'b1',
'a2':'b2'
}))
.then（响应 => {

                     alert('ok');

                })
                .catch(error => alert(error));

有了这个，我能够使用 axios 提交表单，而不管在 axios 上无法更改内容类型的事实

```
const { 全名、电子邮件、密码、电话 } = this.state;
axios（网址，{
方法：“POST”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/x-www-form-urlencoded”
},
数据：this.serialize({
姓名：全名，
电子邮件：电子邮件，
密码：密码，
电话：电话
})
})
.then（响应 => {
控制台日志（响应）；
})
.catch（错误 => {
console.log(error.response);
});

序列化 = obj => {
让 str = [];
for (让 p 在 obj 中)
如果（obj.hasOwnProperty（p））{
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
返回 str.join("&");
};

撞。 可笑的是，多年后，这个恼人的错误仍然没有修复。

撞。 同样的问题，修复所需的af。

@mzabriskie

这不应该像固定的那样关闭吗？
使用适当的标头对其进行了测试，并且它们在请求中得到了正确设置。
请求中的标头
在此处设置标题

form-urlencoded库帮助我解决这个问题（临时）。

return preset.post("/app/BookingProc.do",formurlencoded(dat),{
        headers:{
            Cookie:session
        }
    }).then(response=>{
        return response
    })

@mzabriskie

这不应该像固定的那样关闭吗？
使用适当的标头对其进行了测试，并且它们在请求中得到了正确设置。
请求中的标头
在此处设置标题

不，这不能关闭！
每个人都遇到了问题，却不知道在哪里可以找到解决方案。 它应该在不设置标题的情况下工作，或者应该设置标准标题。
如果不是，则应抛出错误以显示问题所在。
文档也必须更新。

还是坏了！

撞。 这个错误仍然在它的位置，感觉很棒！

撞

这个错误仍然存​​在！

我也遇到了这个错误。

这里还是恶心

const axios = require('axios');
const qs = require('querystring');

axios.post(`${this.api}siteverify`, qs.stringify({
  secret: this.secret,
  response: recaptchaToken,
  remoteip: userIP,
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});

这对我有用。 我从我目前正在开发的应用程序中撕下它，这部分是为了验证谷歌的recaptcha。

还是有同样的问题...

设置为默认值不起作用：
axios.defaults.headers.common['Accept'] = 'application/json'; // working axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; // NOT working

而且请求中的设置也不起作用：
axios.get(url, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })

@aaroninn这似乎不是同一个问题，如果您认为您的问题与axios相关（这似乎与vuex的基本用法更相关，请打开一个新问题我，但我不能确定）

这个帖子已经满了+1 ，不需要在这里收集其他问题

https://github.com/axios/axios/issues/362#issuecomment -229817415

@mzabriskie似乎您是引入此问题的提交的作者，您对此无能为力吗（如果您甚至不明白为什么首先这样做，您可以/应该恢复它，正确的？）

提前致谢

现在是 2018 年！ 上面哪个答案，我不应该投反对票？

再次告诉我为什么我们都喜欢 Axios？

这个问题需要修复吗？ 或者它是自愿的，我问，它已经开放了 2 年，但没有人修复它。 它是自愿的，不需要修复吗？

@jeremycare我只是为这个问题创建了一个 PR ......我认为这是一个非常烦人的“错误”，应该修复。 尤其是解决这个问题并摆脱这个问题真的很容易。

伙计们，我想我明白为什么这张票仍然开放。
那些告诉它对他们有用的人现在使用“qs”模块，那些告诉它不起作用的人使用“querystring”模块。
我看到人们也遇到标题问题，这张票很长时间才能阅读所有内容，可能我并不了解这张票中关于问题的所有内容，但如果有人无法使用表单数据提出请求，请在尝试其他事情之前先检查一下：

在这里描述了一切： https ://github.com/axios/axios/issues/1894

令人失望的是，当 Axios 无法设置它时，浏览器中的原生fetch的换入立即与Content-Type的设置一起工作。 平台之间的互操作对我来说是它最大的卖点。

我可以在transformRequest方法中看到设置了标头，但它从未到达实际请求。 我不能使用 qs 模块，因为我只是发送一段文本。

重新表述我的经历：我无法使用 axios 在浏览器中设置Content-Type标头，因为它已被覆盖。 我正在发送一个字符串有效负载（无表单数据），因此qs / querystring模块与我的情况无关。

我们能做些什么来解决这个问题？

编辑：现在我只是在浏览器中使用 fetch ，但这否定了我使用 axios 的全部意义。

EDIT2：我已经构建了自己的库 -罩- 来处理我在多个环境中的请求（针对 Node/Browser/React-Native）。 它绝不是 axios 及其丰富功能的替代品，但它确实支持所有基础知识。

遇到了同样的问题。 如果我将密钥设置为其他任何东西，它就可以工作，除了“Content-Type”！ 请帮忙！

实际上，我不得不通过在浏览器中使用 fetch 以及在 node 和 react-native 中使用 axios 来创建另一个混乱的混合应用程序。 看起来很有趣，它是这样的，而不是相反。 真的希望能尽快解决这个问题，这样我就可以移除我的猴子补丁。

我认为重要的是要意识到这绝对不仅仅是查询字符串的问题。我的正文内容只是没有参数的原始文本，但我无法使用带有Content-Type的 axios 发送它。

我尝试使用 post，它工作正常，post 默认是 json

我现在正在遇到这个错误......所以多年后没有解决方案吗？ 哇...

我在两个多月前创建了一个可以解决问题的 PR……我不明白为什么它没有被合并？！

我在两个多月前创建了一个可以解决问题的 PR……我不明白为什么它没有被合并？！

请记住，自去年 9 月以来没有人推动任何东西，也许他们正在寻找维护者？ 另外，当我将您的 PR 与以下内容进行比较时，我认为您错过了一项测试： https ://github.com/axios/axios/pull/1544/files

@mzabriskie你能负责合并这些 PR 之一吗？ 由于目前某些软件需要获取请求以设置内容类型（例如 RoR 参数：https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request）。 https://github.com/axios/axios/issues/362#issuecomment -229817415 中指定的解决方案似乎是正确的方法，它最重要的是解决了所有绝望的黑客攻击，比如在这个特定用例中使用 fetch。

我搬到了got pagkage，因为axios似乎被遗弃了。

所以 Axios 官方无法发送带有 'Content-Type': 'application/x-www-form-urlencoded' 的请求，或者@ChBernat解决方案真的有效吗？

这个问题atm有什么解决方法吗？

这个问题atm有什么解决方法吗？

在这里查找一年，你会看到很多解决方法......虽然我会建议，像其他人和我自己一样，从 axios 继续前进。 它被遗弃了...

哇……他们现在应该放弃这个项目，我知道我是。 自最初报告问题以来已近 3 年，现在我们仍在尝试解决这个问题？ 逆天。 我喜欢开源，所以我对这个没有维护者的项目没有任何反感，但是......它被大量的人使用，所以你至少可以放弃它，所以我们都知道这个项目已经死了/垂死了。 谢谢。

@justintime4tea你有新的推荐吗？

got

@kslr got or request 似乎其他人也开始迁移。 我正在尝试坚持使用 Axios，但我认为它最终会归结为我在其上编写一些抽象层，以便我可以换出底层 HTTP 请求库，然后如果我使用具有“内置-in" 它使用的 HTTP 客户端，让它做它的事。

我尝试了这样的事情并为我工作。
也许不是最好的解决方案，但它确实可以帮助（我认为），如果这个解决方案很糟糕，任何建议都是受欢迎的。

const foo= yield qs.stringify({ 'grant_type' : 'yourGrantType', 'param' : param, 'param' : param }) const bar= yield axios.post('/baz', foo)

我已经删除了标题，并且似乎收到了很好的效果。

axios({
  url,
  method: 'POST',
  headers:{
    'Content-Type': 'application/json'
  },
  data: null, // important
})

使用 RoR 作为后端时，我遇到了两个问题。

我的背景：

我有一个使用已弃用vue-resource的项目，并且在没有额外配置的情况下一切正常。 现在，我正在组织项目的依赖项并替换不推荐使用的依赖项，因此我将vue-resource替换为axios ;)...

但是，我们遇到了一些问题，下面我将分享我为解决这些问题所做的工作。 也许可以帮助某人！ 很抱歉，如果我没有按您的预期帮助您

第一个问题，问题与此问题相同，我使用以下方法解决：

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});

现在，参数如下：

q: {
  search: "Something",
  sort: "asc",
}

将转换为：
http://xxxx/?q%5Bsearch%5D=something&q%5Bsort%5D=asc

这个解析将是：

q[search]: something
q[sort]: asc

第二个问题，RoR 正在返回 HTML 响应而不是 JSON 响应：

出现这个问题是因为我们的后端必须将 AJAX 请求与其他类型的请求区分开来。

默认情况下， vue-resource已经按预期设置X-Requested-With标头。 但是，axios 没有。 所以，我必须在请求头中定义这个键。 最后我的 Axios 全局配置如下：

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});
axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

===

如果您使用 Rails 作为后端并且没有一种解决方案适合您，请告诉我，也许我可以帮助您 =)。

使用这个.. https://gist.github.com/akexorcist/ea93ee47d39cf94e77802bc39c46589b#gistcomment -2878451

我正在处理 react-native 并在使用这个时遇到错误的请求 400 错误：
从'querystring'导入*作为qs；
axios.post(url,qs.stringify({
'first_name'：'深'，
“姓氏”：“帕洛特拉”，
}),{
标题：{
'Content-Type': 'application/x-www-form-urlencoded; 字符集=UTF-8'
}
}).then((响应)=>{
console.log('工作')
}).catch((错误)=>{
console.log('错误')
控制台日志（错误）
})

那么，如何解决这个问题呢？

任何解决方案:(

由 qs 解决

{ data: qs.stringify(bodyObject) }

很遗憾看到这么多人对这个问题感到困惑。 我已尽力阅读这些评论。 但它似乎涉及许多其他问题。

各位，请原谅我关闭它。 如果有人可以打开一个新问题来清楚地描述问题，那将非常感谢你。

嘿大家，

我以为我会插话，因为我浪费了我生命中几乎一整天的时间来解决这个问题。 这可能会部分或完全有帮助，因此希望这很有用。

我的回复源于看到 Axios POST 失败的各种原因，包括：

1. 400 错误请求
2. 无法使用自定义标题发布（如此线程）
3. 需要序列化/字符串化数据/有效负载

在像这样在配置中将自定义标头传递给 Axios 时，我遇到了与该线程中的每个人相同的问题，即 Bad Request 400，并尝试了许多此处的响应，例如使用 qs.stringify()，在配置中设置数据为 null 或 {} 无济于事。

1) 注意 - 添加 .catch() 块并像这样记录错误确实对我有帮助，因为我能够发现一个不那么神秘的错误。 我能够使用该消息进行调试并最终找出我遇到的问题。

2) 在 .then() 块中返回response.data很重要，否则你会遇到这个错误：

Converting circular structure to JSON

现在我的问题是 api POST 正文不是端点想要的，但是在我能够记录错误之前我看不到它。

此外，我还使用了 NestJS 和 HttpService，它是 Axios 的包装器，这使问题更加复杂，因为真正的错误并没有在我的管道中的 catchError 回调中冒泡。

所以这里是纯 Axios 和 NestJS 的解决方案。

爱讯：

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return axios.post('https://some-made-up-endpoint, dataString, { headers })
.then(resp => resp.data)
.catch(error => {
this.logger.log('ERROR: ${JSON.stringify(error.response.data)}');
});

巢穴：

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return this.http.post('https://some-made-up-endpoint, dataString, { headers }).pipe(
map(response => response.data), // This is important otherwise - circular JSON error
catchError((error: any) => {
this.logger.error('[[[[ ERROR TRYING TO FETCH TOKEN: ${error.message} ]]]]');
return of()
})
).toPromise();

TLDR；

1) 添加 .catch() 块以正确记录真正的错误，否则为 400 Bad Request
2) 确保您的数据签名与 API 的预期相符。 这是存在错误的部分原因，因为代码 400 是“错误请求”
3) 如果您使用的是 Axios，则在 .then() 块中返回response.data ，如果您使用的是 NestJS，则返回地图运算符中，否则您将收到Converting circular JSON错误

抱歉发了这么长的帖子，祝大家好运！

干杯

我正在处理 react-native 并在使用这个时遇到错误的请求 400 错误：
从'querystring'导入*作为qs；
axios.post(url,qs.stringify({
'first_name'：'深'，
“姓氏”：“帕洛特拉”，
}),{
标题：{
'Content-Type': 'application/x-www-form-urlencoded; 字符集=UTF-8'
}
}).then((响应)=>{
console.log('工作')
}).catch((错误)=>{
console.log('错误')
控制台日志（错误）
})

这对我有用。 与查询 stringfy 非常感谢。
你救了我的命

您可以改用 qs 之类的库：

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

您的解决方案正在运行。 非常感谢！