Axios: تطبيق نوع المحتوى / x-www-form-urlencoded

يجب أن يعمل هذا كما هو موضح. يبدو وكأنه حشرة. سأنظر بالموضوع.

السبب هو المعترضات. لا يمكنني إرسال طلب مع نوع المحتوى هذا فقط عندما أستخدم أجهزة اعتراض.

هذا هو الكود الخاص بي:

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);
        });

داخل المعترض يمكنني رؤية رأس "نوع المحتوى" ، لكن لا يتم إرساله إلى الخادم.
هل أستخدم المعترضات بشكل صحيح؟

أي تحديثات على هذا؟ لدي نفس المشكلة. أكسيوس لا يرسل العنوان الذي قمت بتعيينه.

يبدو أن هذا هو الخط الجاني → https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

هل لديك أي فكرة عن سبب إزالة رأس Content-Type قبل إرسال الطلب؟

خيار الحل هو تغيير data إلى data || {} عند تقديم طلب axios. سيؤدي هذا إلى التأكد من أن البيانات ليست غير محددة.

يبدو أن المنطق الخاص بإزالة Content-Type عندما يكون requestData هو undefined جاء في هذا الالتزام 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' فارغ بسبب الاعتراضات.

أي تحديثات هنا؟ لأنني فقدت ساعة واحدة اليوم في البحث عن سبب عدم تأثير POSTs الخاصة بي على واجهة برمجة التطبيقات (حتى أذكر هذه المشكلة) ... أو لا توجد خطط لإصلاح ذلك ومن الأفضل الذهاب إلى مكان آخر؟

لدي نفس المشكلة ... ما زلت في انتظار الإصلاح ...

يرجى إعادة فتح 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 لحل هذه المشكلة. يعمل بشكل جيد بالنسبة لي.

عظيم ، لكنها ليست طريقة لحل المشكلة في المكتبات IMHO عن طريق تثبيت آخر.

يمكنك فقط إضافة 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 بالنسبة لي في رؤوس الطلبات في علامة تبويب الشبكة.

وهذا تم إصلاحها حتى الآن؟ لا يمكنني تعيين نوع المحتوى الخاص بي مع أي من الحلول المنشورة هنا.

لدي نفس المشكلة ، أي مساعدة؟

لقد قمت بحل المشكلة باستخدام encodeURIComponent :

getToken ثابت (اسم المستخدم وكلمة المرور) {
محاور العودة ({
الطريقة: "post"،
url: "نقاط النهاية" ،
البيانات: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

صدم. قد يفترض المرء بالتأكيد أنه إذا وضع المرء الافتراضات ، فسيتم احترامها دائمًا. أكسيوس يتجاهل بالتأكيد الإعدادات الافتراضية في سياقات معينة ، مما يتسبب في مشاكل للفقراء.

إليك دمج أكثر تحديدًا حيث حدث هذا: 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 إلى سلسلة وتعيين رأس نوع المحتوى
في استخدام Safari - FormData كنص أساسي ولا تقم بتعيين أي رأس من نوع Content

لا أستطيع أن أتخيل كيف أن مشكلة مثل هذه لم يتم إصلاحها لأكثر من نصف عام بالفعل.

واو قضية لطيفة! لا تزال تنتظر التحديث ☕️

تمتص.

تمتص + 1

+1

+1

+1

+1

+1

+1

+1

+1

+1

const querystring = تتطلب ('querystring') ؛

تسجيل الدخول(){
var _this = هذا ؛
هذا. $ http ({
url: url ،
الطريقة: "post"،
البيانات: querystring.stringify ({
البريد الإلكتروني: البريد الإلكتروني ،
كلمة المرور: تمرير
}) ،
الرؤوس: {
"نوع المحتوى": "application / x-www-form-urlencoded"
}
}). ثم (الوظيفة (الاستجابة) {
console.log (استجابة) ؛
}). catch (function (error) {
console.log (خطأ) ؛
}) ؛
}

+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 رائع ، سعيد لأنه نجح.

_ تم الإرسال من OnePlus ONEPLUS A3003 باستخدام FastHub _

+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 لا يقوم تلقائيًا بترميز بيانات المنشور قبل إضافتها إلى نص طلب HTTP ، لذلك يجب ترميزها قبل إرسال الطلب. هذا ما تفعله سلسلة الاستعلام. يتطلب الأمر {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- اكتب: 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 هنا . لن يتم إرسال طلب OPTIONS عندما نرسل طلبًا بسيطًا. الطلب البسيط هو طلب GET و HEAD و POST وله عنوان "نوع المحتوى " يساوي application / x-www-form-urlencoded أو متعدد الأجزاء / بيانات النموذج أو نص / عادي وأي رؤوس مخصصة.

فقط افعل هذا

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
...

نتوء للحصول على حل نظيف ، على استعداد للمساعدة أيضًا.

تضمين التغريدة
فقط افعل هذا

بيانات const = {name: 'my name'}
صيغة const = 'data =' + JSON.stringfy (data)
axios.post ('/ my_url' ، نموذج)

لا يعمل ، ولكن الخطأ المطبعي أعلاه هو JSON.stringify ^^.

بالنسبة لأولئك الذين يستخدمون 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);
    }
);

تضمين التغريدة
استخدم المعلمات بدلاً من البيانات

إذا نجح ذلك ، فهو أنظف حل حتى الآن.

oshalygin يقوم بتعيين المعلمات على سلسلة الاستعلام ، ولا يرسلها كمتغيرات لاحقة.

مكتبة أجاكس لا يمكنها نشر نموذج بسيط؟ حقا؟

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 في 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

إذا (مجموعة ($ _POST)) {
$ Field_to_add = المصفوفة ('name'، 'description')؛
استجابة $ = json_decode (file_get_contents ("php: // input") ، صحيح) ؛
foreach ($ response كـ $ k => $ v) {
إذا (in_array ($ k، $ الحقول_to_add)) {
$ _POST [$ k] = $ v؛
}
}
صدى json_encode ($ _POST) ؛
خروج()؛
} آخر{
echo json_encode (array ('message' => 'Invalid Request')) ؛
خروج()؛
}
""

ضع أسماء الحقول على شكل قائمة بأسماء الحقول. سوف يحولها تلقائيًا إلى منشور
أتمنى أن يساعدك هذا

+1

+1

+1

OMG 😱 لم أكن أعرف أن إرسال طلب POST مع بعض بيانات نموذج application / x-www-form-urlencoded معقد للغاية مثل هذا. لا بد لي من إعادة قراءة README عدة مرات ، وفهم خاطئ أنه يمكن استخدام حقل بيانات التكوين مع qs.stringify () ، وكذلك حقل المعلمات.

في الوقت الحالي ، يبدو أن طرق المثيل فقط هي التي تدعم إرسال بيانات نموذج x-www-form-urlencoded مثل:

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

+1

غير محلول!

إنه مفتوح مثل ... إلى الأبد. يستخدم lib الطلب القديم لجعله بهذه البساطة.

+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 شكرا لك!

يمكنك فعل هذا أيضًا. يأتي هذا مباشرة من صفحة أكسيوس جيثب. سيتعين عليك إنشاء عنوان URL المشفر بنفسك ، لكنني اختبرته للتو ، وهو يعمل.

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

هذا الخطأ لا يزال موجودا ، أي تحديث؟

@ DZuz14 أحاول ذلك ولا يعمل. باستخدام أكسيوس جلوبالس ، على سبيل المثال ، ولا شيء.
يبدو أنه مقيد.

+1

أكسيوس تمتص ， طلب استخدام للاستبدال

+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);
        });

لقد حددت مجموعة الأحرف (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 فقط ، لن يتم تنفيذ فشل إرسال رؤوس طلب خيارات تعيين فشل عبر المجال ، وراء العملية.

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

لقد بدأت مع Axios ، كما أوصى به أحد زملائي ، وكان أول مسعى بالنسبة لي هو الحصول على رمز الوصول من واجهة برمجة تطبيقات عاملة. وأنا أصطدم بهذا الخطأ ، ثم عدت إلى jQuery ، (بصراحة ، أنا أقوم بتسخين jQuery كثيرًا ، لكنه اضطر إلى فعل ذلك). لذلك أعتقد أنه لا توجد طريقة أفضل لجعل الناس يفرون من هذه المكتبة من هذا الخطأ القديم الذي لم يتم حله.

أقدر كل العمل المنجز في هذه المكتبة ، بصفتي مطورًا أعرف أن إنشاء مكتبة ليس مهمة تافهة ، وآمل أن أترك jQuery ينخفض ​​يومًا ما والعودة إلى هنا مرة أخرى.

HakamFostok أنا أستخدم github / fetch بنجاح في الإنتاج للحصول على رمز api الذي يمكنك استكشافه كبديل لـ jquery.
https://github.com/github/fetch

usopan شكرا جزيلا لك ، سوف ألقي نظرة عليه

تضمين التغريدة
أسهل طريقة لتجاوز هذا الخطأ هي استخدام 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 ؛)

لكنك محق تماما كان يجب حل هذا الخطأ منذ زمن بعيد. لا أعرف ما الذي يستغرقهم وقتًا طويلاً.

HakamFostok @ Silve2611 أؤكد أن حل qs يعمل ، أستخدمه للحصول على الرموز هنا: https://github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

نعم ، يعمل حل "qs" ، ولكن المشكلة هي أنني لا أستخدم "qs" في المشروع. شكرًا للمساعدة على أي حال ، انتهى بي الأمر برمي هذه المكتبة واستخدام مكتبة ajax https://github.com/fdaciuk/ajax فهي أفضل بكثير ، وأنا أشجع الجميع على التخلص من هذه المكتبة والهجرة إليها.

يتم تنزيل qs ما يقرب من 60 مليون مرة شهريًا ، وهو 4.8 كيلوبايت مضغوطًا.
Express ، ومحلل الجسم ، والطلب ، والوكيل الفائق والعديد من الآخرين يعتمدون عليه ، يمكنك إضافته دون خوف إلى مشروعك.

HakamFostok بقدر ما أعرف أنه جزء من الوحدة الأساسية لذلك لا يتعين عليك تثبيته يدويًا إذا كان إصدار العقدة محدثًا.

أنا فقط لا أريد تثبيت أي مكتبة ، وهو ما لا أحتاجه ، فقط لإنشاء حل بديل لمشكلة يجب حلها منذ سنوات عديدة. لمعلوماتك فقط ، مشروعي ليس مشروع React ولا أستخدم عقدة ، أنا أستخدم ASP.NET MVC مع vue.js

تم تضمين وحدة "سلسلة الاستعلام" ، وبقدر ما أعرف ، فإنها تفعل نفس الشيء.

axios ماذا عن هذا الخطأ الذي لا يزال قائما؟

HakamFostok أنا أستخدم vue أيضًا وهو يعمل بشكل مثالي مع Axios. ضع في اعتبارك استخدام qs لأن المحاور لها الكثير من المزايا إذا كنت تريد استخدام الانتظار غير المتزامن.

لا تزال المشكلة تحدث ولا بد لي من استخدام qs يدويًا مثل هذا

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

هل هذا حقا حشرة؟ أقوم بعمل عنوان url مشفر في مشروعين مختلفين باستخدام أكسيوس ، وهو يعمل بشكل جيد. التعليق الذي نشرته هنا سابقًا هو الشيء الوحيد الذي قمت بتعيينه ، وهو يعمل.

بالطبع هو خطأ! لا يعمل كما هو موضح في المستندات. كما أنه ليس من المنطقي إضافة خطوة إضافية لشيء يجب التعامل معه بوضوح بواسطة المحاور. طرق أخرى لا تحتاج إلى الخطوة.

نعم ، ليس من المنطقي أن تضطر إلى إضافة خطوة إعلان.
إذا كنت أريد أن أنشر

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 ، وهو أمر صعب بعض الشيء ، حيث سيتعين علينا التعامل مع طريقة محورية لإعداد application/json;charset=utf-8 عند التعامل مع بيانات الكائن.

نأمل أن تكون لدينا قدرة أكبر في تعيين Content-Type يدويًا بدلاً من "تخمين" المحاور بالنسبة لنا.

يجب "تخمين" ذلك لنا أو إلقاء خطأ يمكننا التعامل معه. في الوقت الحالي ، يبدو كل شيء على ما يرام ولكن من الواضح أن الباران لا يتوافقان. لن يتمكن المبتدئ الذي يعمل مع أكسيوس من تتبع مثل هذا الخطأ. على الأقل يجب توثيقه بشكل صحيح.

+1 قضيت للتو ساعتين في تتبع هذه المشكلة. كنت سأقدر على الأقل شرحًا / ملاحظة أفضل في الملف التمهيدي. سيتم التحديث إذا كان 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

بعد عامين ولم يتم حل هذا الخطأ بعد

+1

+1

+1 لا تزال هناك مشكلة

+1

+1
تضمين التغريدة

المشكلة في جانب nodejs هي أن إحدى التبعيات ، follow-redirects ، تحذف رأس نوع المحتوى:

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

+1 تواجه بالتأكيد نفس المشكلة هنا

+1

أصلح هذا أخيرًا لعدم استخدام الاختراقات كـ qs (ولكن نعم ، يعمل qs)

هج

1. maj 2018 23.31 skrev "Leonid Ershov" [email protected] :

إصلاح هذا أخيرًا عدم استخدام الاختراقات مثل qs

-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/axios/axios/issues/362#issuecomment-390337824 ، أو كتم الصوت
الخيط
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
.

يبدو أن هذه المشكلة لن يتم إصلاحها

لقد بدأت تصبح سخيفة!

ولا حتى "f ** k أنت ، لن نصلح هذا أبدًا!" : /

+1

+1

يبدو أن بعض الأبطال أصلحها وخلق نسخة محددة "aaxios"
السماح بتحديد نوع المحتوى
لم أختبره رغم ذلك ، انتقل إلى الجلب

+1

+1

+1

+1

👍
كما قال camposjorge ، قد نرى إصلاحًا (قريبًا؟) بفضل https://github.com/axios/axios/pull/1544

لا يوجد حل؟

+1

حلها! إنها ليست مشكلة أكسيوس ، فقط تتعلق بالأصل المتقاطع

ضع {headers: {'Content-Type': 'application / x-www-form-urlencoded؛ مجموعة أحرف = UTF-8 '}}
و
فقط استخدم convertRequest من خيارات axios

convertRequest: [الوظيفة (البيانات) {تنسيق الإرجاع (البيانات)}] ،

دالة التنسيق المستخدمة لتحليل {a: "a"، b: "b"} إلى "a = a & b = b"

+1 ، ولم ينجح أي من الحلول المذكورة أعلاه

+1

يبدو أن الكثير من الأشخاص ما زالوا ينتظرون إصلاحًا لهذه المشكلة ، بما فيهم أنا - بالتأكيد بعد كل هذا الوقت يجب أن يكون هناك بعض الحلول المقترحة لهذا الأمر.

إصلاح هذه المشكلة مع qs.stringify في رد فعل.

عليك فقط qs.stringify البيانات قبل تمريرها إلى axios.post

المشكلة هي أنه افتراضيًا يتم تسجيل رمز CSRF كرأس مشترك مع Axios
لحل هذه المشكلة

1- استبدل هذه الخطوط في bootstrap.js "

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

دع الرمز المميز = 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- قم بتثبيت وحدة qs بواسطة npm انقر هنا

3- حدد const من qs كما يلي:
const qs = تتطلب ('qs') ؛
4- استخدم Axios بالافتراء مثل هذا:
axios.post ('your link here'، qs.stringify ({
'a1': 'b1'،
'a2': 'b2'
}))
ثم (استجابة => {

                     alert('ok');

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

باستخدام هذا ، تمكنت من إرسال نموذج باستخدام المحاور بغض النظر عن حقيقة أنه لا يمكن تغيير نوع المحتوى على المحاور

""
const {fullname، email، password، phone} = this.state؛
أكسيوس (عنوان url ، {
الطريقة: "POST" ،
الرؤوس: {
قبول: "application / json" ،
"نوع المحتوى": "application / x-www-form-urlencoded"
} ،
البيانات: this.serialize ({
الاسم: الاسم الكامل ،
البريد الإلكتروني: البريد الإلكتروني ،
كلمة المرور: كلمة المرور ،
الهاتف: الهاتف
})
})
ثم (استجابة => {
console.log (استجابة) ؛
})
. صيد (خطأ => {
console.log (error.response) ؛
}) ؛

تسلسل = obj => {
دعونا str = [] ؛
لـ (اسمح p في الهدف)
إذا (obj.hasOwnProperty (ع)) {
str.push (encodeURIComponent (p) + "=" + encodeURIComponent (obj [p])) ؛
}
عودة str.join ("&") ؛
} ؛

صدم. يبعث على السخرية ، بعد سنوات ، أن هذا الخطأ المزعج لم يتم إصلاحه بعد.

صدم. نفس المشكلة هنا ، الإصلاح المطلوب بعد.

تضمين التغريدة

ألا يجب إغلاق هذا على أنه تم إصلاحه؟
اختبرها باستخدام رؤوس مناسبة وتم تعيينها بشكل صحيح في الطلب.
رؤوس في الطلب
تعيين الرؤوس هنا

تساعدني مكتبة form-urlencoded في إصلاح ذلك (مؤقتًا).

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

تضمين التغريدة

ألا يجب إغلاق هذا على أنه تم إصلاحه؟
اختبرها باستخدام رؤوس مناسبة وتم تعيينها بشكل صحيح في الطلب.
رؤوس في الطلب
تعيين الرؤوس هنا

لا لا يمكن إغلاق هذا !!!
الجميع يواجه المشكلة ولا يجد الحل. يجب أن يعمل بدون تعيين رؤوس أو يجب تعيين رأس قياسي.
إذا لم يكن الأمر كذلك ، فيجب إلقاء خطأ يوضح مكان المشكلة.
كما يجب تحديث الوثائق.

لا تزال مكسورة!

صدم. هذا الخطأ لا يزال في مكانه ويشعر بالارتياح!

صدم

هذا الخطأ لا يزال يعيش!

أنا أيضا أواجه هذا الخطأ هنا.

لا يزال مقرف هنا

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 من google.

لا تزال تواجه نفس المشكلة...

الإعداد الافتراضي لا يعمل:
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 to أنا ، لكن لا يمكنني التأكد)

هذا الموضوع ممتلئ بالفعل بـ +1 ، لا داعي لتجميع مشكلات أخرى هنا

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

mzabriskie يبدو أنك مؤلف الالتزام الذي قدم هذه المشكلة ، ألا يمكنك فعل أي شيء حيال ذلك (إذا لم تفهم حتى سبب قيامك بذلك في المقام الأول ، فيمكنك / يجب عليك الرجوع عنه ، الصحيح؟)

شكرا مقدما

إنه 2018! أي إجابة أعلاه يجب ألا أعارضها؟

قل لي مرة أخرى لماذا نحب جميعًا أكسيوس؟

هذه المشكلة بحاجة الى حل؟ أو أنه طوعي ، أنا أسأل ، تم فتحه منذ عامين ولكن لم يصلحه أحد. هل هو طوعي ولا داعي للإصلاح؟

jeremycare لقد قمت للتو بإنشاء علاقات عامة لهذه المشكلة ... أعتقد أنها "خطأ" مزعج حقًا ويجب إصلاحها. من السهل حقًا إصلاح هذا والتخلص من هذه المشكلة.

يا رفاق ، أعتقد أنني أفهم لماذا لا تزال هذه التذكرة مفتوحة.
يستخدم الأشخاص الذين يخبرون أنها تعمل معهم الآن وحدة "qs" ، ومن يخبرون أنها لا تعمل ، يستخدمون الوحدة النمطية "querystring".
أرى أشخاصًا يعانون أيضًا من مشاكل في الرؤوس ، هذه التذكرة طويلة جدًا لقراءة كل شيء وقد لا أفهم كل شيء عن المشكلة في هذه التذكرة ، ولكن إذا لم يتمكن شخص ما من تقديم طلبات بشأن عمل بيانات النموذج ، فراجع هذا قبل تجربة أشياء أخرى:

وصف كل شيء هنا: https://github.com/axios/axios/issues/1894

إنه لأمر مخيب للآمال أن نرى مقايضة في المتصفحات الأصلية fetch تعمل على الفور مع الإعداد Content-Type عندما يفشل Axios في تعيينه. كان Interop بين المنصات أكبر نقطة بيع بالنسبة لي.

أستطيع أن أرى في طريقة transformRequest أن الرأس قد تم تعيينه ولكنه لا يصل أبدًا إلى الطلب الفعلي. لا يمكنني استخدام وحدة qs لأنني ببساطة أرسل نصًا.

لإعادة صياغة ما أواجهه: لا يمكنني تعيين رأس Content-Type في المتصفح باستخدام axios أثناء الكتابة فوقه. أنا أرسل حمولة سلسلة (لا توجد بيانات نموذجية) ، لذا فإن الوحدات النمطية qs / querystring ليست ذات صلة بحالتي.

ما يمكننا القيام به لإصلاح هذا؟

تحرير: في الوقت الحالي ، سأستخدم الجلب عندما أكون في المتصفح ، لكن هذا النوع من ينفي الفكرة الكاملة لاستخدام المحاور بالنسبة لي.

EDIT2: لقد قمت ببناء مكتبتي الخاصة - الطربوش - للتعامل مع طلباتي في بيئات متعددة (استهداف Node / Browser / React-Native). إنها ليست بأي حال من الأحوال بديلاً عن أكسيوس وثروة من الميزات ، لكنها تدعم جميع الأساسيات.

حصلت على نفس المشكلة. وإذا قمت بتعيين المفتاح إلى أي شيء آخر ، فإنه يعمل ، باستثناء "نوع المحتوى"! الرجاء المساعدة!

لقد اضطررت بالفعل إلى إنشاء تطبيق هجين فوضوي آخر باستخدام الجلب في المتصفحات والمحاور في العقدة وداخل التفاعل الأصلي. يبدو من المضحك أن الأمر كذلك وليس العكس. آمل حقًا أن أرى هذا يتم معالجته قريبًا حتى أتمكن من إزالة رقعة القرد الخاصة بي.

أعتقد أنه من المهم أن ندرك أن هذه بالتأكيد ليست مشكلة في سلسلة الاستعلام فقط .. محتوى جسدي هو مجرد نص خام بدون معلمات ، ومع ذلك لا يمكنني إرساله باستخدام أكسيوس مع Content-Type .

لقد حاولت استخدام المنشور ، إنه يعمل بشكل جيد ، الافتراضي للنشر هو json

أنا أعاني من هذا الخطأ الآن ... إذن لا يوجد حل لهذا بعد سنوات؟ رائع...

لقد قمت بإنشاء PR من شأنه أن يحل المشكلة منذ أكثر من شهرين ... لا أفهم لماذا لم يتم دمجها ؟!

لقد قمت بإنشاء PR من شأنه أن يحل المشكلة منذ أكثر من شهرين ... لا أفهم لماذا لم يتم دمجها ؟!

ضع في اعتبارك أنه لم يدفع أحد أي شيء منذ سبتمبر من العام الماضي ، فربما يبحثون عن مشرفين ؟. أيضًا ، أعتقد أنك فاتتك اختبارًا عندما أقارن العلاقات العامة الخاصة بك بـ: https://github.com/axios/axios/pull/1544/files

mzabriskie هل يمكنك تحمل مسؤولية دمج أحد هذه العلاقات العامة؟ نظرًا لأن بعض البرامج حاليًا تتطلب الحصول على طلبات للحصول على مجموعة نوع محتوى (معلمات RoR على سبيل المثال: https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request). يبدو أن الحل المحدد في https://github.com/axios/axios/issues/362#issuecomment -229817415 هو الطريقة الصحيحة للذهاب وسيحل الأهم من ذلك كله جميع الاختراقات اليائسة مثل استخدام الجلب لحالة الاستخدام المحددة هذه.

انتقلت إلى الصفحة got ، حيث يبدو أن axios مهجور.

لذا فإن Axios غير قادر رسميًا على إرسال الطلبات باستخدام "نوع المحتوى": "application / x-www-form-urlencoded" أم أن حل ChBernat يعمل بالفعل؟

هل هناك أي حل بديل بشأن هذه المشكلة أجهزة الصراف الآلي؟

هل هناك أي حل بديل بشأن هذه المشكلة أجهزة الصراف الآلي؟

ابحث هنا لمدة عام وسترى الكثير من الحلول ... على الرغم من أنني أوصي ، مثل الآخرين وأنا ، بالانتقال من Axios. إنها مهجورة ...

واو ... عليهم فقط التخلي عن المشروع في هذه المرحلة ، وأنا أعلم أنني كذلك. ما يقرب من 3 سنوات منذ الإبلاغ عن المشكلة في الأصل وما زلنا نحاول الآن حل هذا الأمر؟ لا يصدق. أنا أحب المصدر المفتوح ، لذا فأنا لا أشعر بأي مشاعر سيئة لهذا المشروع وليس لديه مشرفون ولكن ... يستخدمه TONS من الأشخاص ، لذا فإن أقل ما يمكنك فعله هو التخلي عنه ، لذلك نعلم جميعًا أن هذا المشروع مات / يحتضر. شكرا.

@ justintime4tea هل لديك توصية جديدة؟

got

يبدو أن kslr الذي تم الحصول عليه أو الطلب هو ما بدأه الآخرون في الترحيل أيضًا. أحاول التمسك بـ Axios ، لكنني أعتقد أنه سينتهي بي الأمر إلى مجرد كتابة طبقة تجريدية فوقها حتى أتمكن من تبديل مكتبة طلبات HTTP الأساسية ، ثم إذا استخدمت مكتبة مختلفة تحتوي على " -في "عميل 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.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';

===

إذا كنت تستخدم ريلز كخلفية ولم يعمل أي من الحلول معك ، فأخبرني ، ربما أساعدك =).

استخدم هذا .. https://gist.github.com/akexorcist/ea93ee47d39cf94e77802bc39c46589b#gistcomment -2878451

أعمل على رد فعل أصلي وأحصل على خطأ 400 طلب سيء عند استخدام هذا:
استيراد * كـ qs من "سلسلة الاستعلام" ؛
axios.post (url، qs.stringify ({
"الاسم_الأول": "عميق"،
"Last_name": "palotra"،
}) ، {
الرؤوس: {
"نوع المحتوى": "application / x-www-form-urlencoded؛ محارف = UTF-8 '
}
}) ثم ((رد) => {
console.log ('عمل')
}). catch ((خطأ) => {
console.log ('خطأ')
console.log (خطأ)
})

إذن ， كيف تحل هذه المشكلة؟

اي حل :(

تم حلها بواسطة qs

{ data: qs.stringify(bodyObject) }

من المحزن أن نرى الكثير من الناس مرتبكين في هذه القضية. لقد بذلت قصارى جهدي لقراءة تلك التعليقات. لكن يبدو أنه اشتمل على العديد من المشكلات الأخرى.

الجميع ، اغفر لي لإغلاقه. إذا تمكن شخص ما من فتح عدد جديد لوصف المشكلة بوضوح ، فسيكون ذلك حقًا شكرًا جزيلاً لك.

مرحبا جميعا،

ظننت أنني سألتقي لأنني أضعت يوم عمل كامل تقريبًا من حياتي في محاولة لحل هذا. قد يساعد هذا البعض جزئيًا أو كليًا على أمل أن يكون هذا مفيدًا.

تنبع إجابتي من رؤية أسباب مختلفة لفشل POST مع Axios تتراوح من:

1. 400 طلب سىء
2. لا يمكن النشر برؤوس مخصصة (مثل هذا الموضوع)
3. تحتاج إلى إجراء تسلسل / ترسيخ البيانات / الحمولة

كنت أواجه نفس المشكلة التي يواجهها كل شخص في هذا الموضوع مع طلب غير صالح 400 عند تمرير رؤوس مخصصة إلى Axios في التكوين مثل هذا ، وجربت العديد من الردود هنا ، مثل استخدام 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 طلب سيء
2) تأكد من تطابق توقيع البيانات مع ما تتوقعه واجهة برمجة التطبيقات. هذا جزء من سبب وجود خطأ لأن الرمز 400 يعد "طلبًا سيئًا"
3) قم بإرجاع response.data في كتلة .then () إذا كنت تستخدم Axios ، أو في مشغل الخريطة إذا كنت تستخدم NestJS أو ستحصل على الخطأ Converting circular JSON

آسف على المنشور الطويل ونتمنى لك التوفيق للجميع!

هتافات

أعمل على رد فعل أصلي وأحصل على خطأ 400 طلب سيء عند استخدام هذا:
استيراد * كـ qs من "سلسلة الاستعلام" ؛
axios.post (url، qs.stringify ({
"الاسم_الأول": "عميق"،
"Last_name": "palotra"،
}) ، {
الرؤوس: {
"نوع المحتوى": "application / x-www-form-urlencoded؛ محارف = UTF-8 '
}
}) ثم ((رد) => {
console.log ('عمل')
}). catch ((خطأ) => {
console.log ('خطأ')
console.log (خطأ)
})

هذا العمل بالنسبة لي. مع الاستعلام stringfy شكرا جزيلا.
أنت تنقذ حياتي

يمكنك استخدام مكتبة مثل qs بدلاً من ذلك:

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

الحل الخاص بك يعمل. شكرا جزيلا!