Axios: Aplikasi Jenis Konten/x-www-form-urlencoded

Dibuat pada 28 Jun 2016  ·  220Komentar  ·  Sumber: axios/axios

Coba kirim permintaan dengan tipe konten application/x-www-form-urlencoded

var data = Querystring.stringify({ 
                "grant_type": "password",
                "username": login,
                "password": password
            });
axios.post(Urls.login, data);

tetapi tidak ada tajuk seperti itu dalam permintaan.

Saya mencoba menggunakan kode:

  var data = Querystring.stringify({ 
                "grant_type": "password",
                "username": login,
                "password": password
            });
        return axios({
            method: 'post',
            url: Urls.login,
            data: data,
            headers: {
                'Content-type': 'application/x-www-form-urlencoded'
            }
        });

permasalahan yang sama

kode jquery berfungsi dengan baik:

$.ajax({
            url: Urls.login,
            data: data,
            type: "POST",
            headers: {
                'Content-type': 'application/x-www-form-urlencoded'
            }
        });

Bagaimana saya bisa menggunakan aksioma untuk mengirim permintaan dengan tajuk ini?

Komentar yang paling membantu

Anda dapat menggunakan perpustakaan seperti qs sebagai gantinya:

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

Semua 220 komentar

Itu harus bekerja seperti yang Anda tunjukkan. Kedengarannya seperti bug. Aku akan melihat ke dalamnya.

Penyebabnya adalah pencegat. Saya tidak dapat mengirim permintaan dengan Tipe-Konten itu hanya ketika saya menggunakan pencegat.

Ini kode saya:

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

Di dalam pencegat saya dapat melihat tajuk 'Tipe-Konten', tetapi tidak dikirim ke server.
Apakah saya menggunakan pencegat dengan benar?

Ada pembaruan tentang ini? Saya memiliki masalah yang sama. Axios tidak mengirim tajuk yang saya atur.

Ini tampaknya menjadi baris pelakunya → https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

Adakah yang tahu mengapa header Content-Type dihapus sebelum permintaan dikirim?

Opsi penyelesaiannya adalah mengubah data Anda menjadi data || {} saat Anda membuat permintaan axios. Ini akan memastikan data tidak terdefinisi.

Sepertinya logika untuk menghapus Content-Type ketika requestData adalah undefined datang dalam komit ini https://github.com/mzabriskie/axios/commit/9096d34186d5a5148f06c07854b21d6cc8035e96. Namun tidak ada indikasi mengapa itu ditambahkan.

Saya akan memilih jika requestData adalah undefined dan metodenya adalah PUT , POST atau PATCH dan tidak ada Content-Type telah ditetapkan, maka default Content-Type ke application/x-www-form-urlencoded . Kalau tidak, hormati saja apa pun yang telah ditentukan.

@mzabriskie Tapi dalam potongan kode yang disediakan oleh @alborozd , data diatur ke Querystring.stringify({...}) , jadi requestData tidak boleh undefined , kan?

@mzabriskie Saya pikir Anda benar. Ketika saya menggunakan fiddler interseptor permintaan menunjukkan bahwa data kosong. Tanpa pencegat saya dapat melihat data dan header dan berfungsi dengan baik.

Jadi, mungkin masalah terjadi ketika Anda bekerja dengan pencegat.

Tidak diperlukan pencegat untuk menghancurkan benda ini. Saya telah menetapkan default header tipe konten axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; , dan saya tidak dapat mengirim muatan apa pun di badan POST.

Saya telah menggunakan solusi dengan URLSearchParams:

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

Tapi ini tidak didukung oleh Safari dan IE.

Sunting: Oke :) Pembaruan selanjutnya tentang solusi. Solusi yang didukung penuh adalah mengirim data sebagai string kueri.
data: "flashcard=" + JSON.stringify(flashcard) + "&stackUri=" + stackUri . Sakit, tapi berhasil 👍

Anda dapat menggunakan perpustakaan seperti qs sebagai gantinya:

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

ini bukan solusi. Apa bedanya jika saya akan menggunakan "Querystring" atau "qs" ? Masalahnya adalah header ['Content-Type'] = 'application/x-www-form-urlencoded' kosong karena pencegat.

Ada pembaruan di sini? Karena saya kehilangan 1 jam hari ini untuk meneliti mengapa POST saya tidak memengaruhi API (sampai saya diingatkan tentang masalah itu) ... Atau tidak ada rencana untuk memperbaikinya dan lebih baik pergi ke tempat lain?

Saya memiliki masalah yang sama ... masih menunggu perbaikan ...

Silakan buka kembali @nickuraltsev karena ini tidak diperbaiki oleh solusi Anda.

+1 untuk masalah.

Saya menggunakan pencegat dengan perpustakaan qs untuk menyelesaikan masalah ini. Bekerja dengan baik untuk saya.

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

hyanmandian berkomentar 14 jam yang lalu
Saya menggunakan pencegat dengan perpustakaan qs untuk menyelesaikan masalah ini. Bekerja dengan baik untuk saya.

Bagus, tapi itu bukan cara untuk menyelesaikan masalah di perpustakaan IMHO dengan menginstal yang lain.

Anda bisa menambahkan data: {} ke konfigurasi, sehingga pencegat tidak melewatkan header yang kita tentukan.

Inilah yang saya lakukan, dan itu berhasil untuk saya:

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

Ini mengubah Content-Type dari application/json menjadi audio/x-wav untuk saya di header permintaan di tab jaringan.

Ini udah fix belum? Sepertinya saya tidak dapat mengatur Tipe-Konten saya dengan salah satu solusi yang diposting di sini.

Saya memiliki masalah yang sama, ada bantuan?

Saya memecahkan masalah menggunakan encodeURIComponent :

static getToken(nama pengguna, kata sandi) {
kembali aksio({
metode: 'posting',
url: 'titik akhir',
data: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

menabrak. Orang pasti akan berasumsi bahwa jika seseorang menetapkan default, mereka akan selalu dihormati. Axios jelas mengabaikan default dalam konteks tertentu, menyebabkan masalah bagi orang miskin.

Berikut penggabungan yang lebih spesifik tempat ini terjadi: https://github.com/mzabriskie/axios/pull/195/files

+1 untuk masalah ini.
Menghabiskan lebih dari 3 jam mencoba mencari tahu apa yang salah dengan konfigurasi Tomcat saya dan tampaknya header saya dicuri dalam perjalanan ke server. Solusi tidak membantu. Tuhan selamatkan header!

@polyakoff bagaimana Anda memecahkan ini? atau apakah Anda masih terjebak. Apa yang saya amati adalah bahwa masalah ini terjadi sesekali

@usopan Masih macet.

Saya pindah ke isomorphic-fetch untuk permintaan khusus ini sebagai solusi.
Hal-hal tampaknya berfungsi dengan baik di sebagian besar browser, tetapi masih tidak berfungsi pada versi Safari tertentu.
Saya mulai berpikir bahwa Safari sedang mempermainkan saya.

+1 untuk masalah ini.

Saya menemukan solusinya. Solusinya adalah mendeteksi browser.
Dalam penggunaan Chrome - https://github.com/ljharb/qs untuk mengurai data json ke string dan mengatur header Content-Type
Dalam penggunaan Safari - FormData sebagai badan dan jangan atur header Tipe Konten apa pun

Tidak bisa membayangkan bagaimana masalah seperti ini tidak diperbaiki selama lebih dari setengah tahun.

wah masalah yang bagus! masih nunggu update nya ️

menyebalkan sekali.

itu menyebalkan + 1

+1

+1

+1

+1

+1

+1

+1

+1

+1

const querystring = membutuhkan('string kueri');

Gabung(){
var _ini = ini;
ini.$http({
url: url,
metode: 'posting',
data: querystring.stringify({
email: email,
kata sandi: lulus
}),
header: {
'Jenis Konten': 'application/x-www-form-urlencoded'
}
}).lalu(fungsi (respon){
console.log(tanggapan);
}).catch(fungsi (kesalahan) {
console.log(kesalahan);
});
}

+1

+1

+1

jadi untuk meringkas ini, setiap permintaan yang dikirim dengan Content-Type: application/x-www-form-urlencoded adalah:

  • Tidak menyandikan muatan secara otomatis
  • Tidak mengatur tajuk meskipun telah ditentukan

Solusinya, untuk saat ini, setel data: {} agar header disetel, dan enkode secara manual payload data permintaan

Saya membagikan kode saya:

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

Ini sepertinya berhasil untuk saya

Hallo teman-teman! Saya bertanya-tanya, haruskah saya membuat garpu dan memberikan solusi dengan metode penguraian kueri asli kecil? Apakah ini akan menjadi 'pola' yang baik bagi pembuat konten? @mzabriskie Apakah Anda ingin mengintegrasikan hal seperti itu?

menghabiskan lebih dari 3 jam untuk membahas masalah ini .. @Maxwell2022 dapatkah Anda memberi kode dengan beberapa contoh data?

+1

1

+1

@bsjaffer Saya telah memposting contoh kode, apa lagi yang Anda inginkan?

@ Maxwell2022 saya baik-baik saja sekarang.

+1

+1

+1

+1

+1

+1

+1

+1

Lakukan saja, semoga membantu.

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

Yup, Anda dapat menebaknya, +1

+1

+1

+1, solusi reznord melakukan keajaiban ( mengatur data bersama header ):
const config = { headers: { 'Content-Type': 'multipart/form-data' }, data: {} };

@bruddah keren, senang berhasil.

_Dikirim dari OnePlus ONEPLUS A3003 saya menggunakan FastHub _

+1

Menggunakan qs bekerja untuk saya!

Di Bereaksi, ini berhasil untuk saya:

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

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

Alasan untuk ini adalah bahwa axios tidak secara otomatis menyandikan data posting sebelum menambahkannya ke badan permintaan HTTP, sehingga perlu dikodekan sebelum mengirim permintaan. Itulah yang dilakukan string kueri. Dibutuhkan {id:32, name:'john'} dan menghasilkan sesuatu seperti id=32&name=john dan kemudian axios menetapkannya sebagai badan permintaan posting.

Anda dapat menguji ini dengan membuat permintaan berikut:

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

Itu harus memiliki hasil yang sama dengan kode di atas.

masih belum diperbaiki lebih dari setahun sejak ini dibuka ....

+1

+1

Hai teman-teman! Anda dapat mencoba ini, ini berfungsi dengan baik untuk saya, tetapi saya tidak tahu mengapa.

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

Mencoba mengirim _Content- Type:application/json-patch+json_ dalam permintaan Patch (mengikuti RFC6902 ),
berikut ini berfungsi untuk saya (saya memiliki tipe yang tepat di header permintaan):

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

Bagi mereka yang mengalami masalah ini karena pencegat menimpa tajuk, gunakan saja di pencegat Anda:

config.header['yourheader'] = value;

dari pada

config.header = {'yourheader': value}

@ DavidJiang7 solusi harus bekerja

Ini bekerja untuk saya:

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

Gambar menarik menunjukkan kasus CORS DI SINI . Permintaan OPSI tidak akan terkirim saat kami mengirimkan permintaan SEDERHANA. Permintaan sederhana adalah permintaan yang GET, HEAD, POST dan memiliki header 'content-type ' sama dengan application/x-www-form-urlencoded , multipart/form-data , atau text/plain dan header kustom apa pun.

Lakukan saja ini

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

diedit
maaf tentang kesalahan ketik. dan itu berhasil untuk saya, saya telah menggunakan ini selama berbulan-bulan.
Saya lupa menyebutkan bahwa di server Anda hanya memiliki param data

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

benjolan untuk solusi bersih, bersedia membantu juga.

@jesusantguerrero
Lakukan saja ini

const data = {nama: 'nama saya'}
bentuk const = 'data=' + JSON.stringfy(data)
axios.post('/my_url', formulir)

tidak berfungsi, tetapi JSON.stringify ^^ salah ketik di atas.

Bagi Anda yang menggunakan Node.js, ini berfungsi. Terima kasih semua orang di utas Saya pada dasarnya menggabungkan banyak solusi orang dan referensi dokumen Node.js

Ini adalah yang terbersih yang bisa saya dapatkan.

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

gunakan params alih-alih data

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
gunakan params alih-alih data

Jika itu berhasil, ini adalah solusi terbersih sejauh ini.

@oshalygin itu mengatur params ke string kueri, tidak mengirim sebagai variabel posting.

Pustaka ajax yang tidak dapat memposting formulir sederhana? Betulkah?

1

ada yang tahu siapa yang harus mengatur tipe konten ke application/json.

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

itu tidak bekerja.

@hellomrbigshot mungkin masalah CORS (baca tentang itu, juga di utas ini)

Bagian kode yang merepotkan di Axios bagi saya (mengalami kesulitan mendapatkan payload dengan benar tanpa menggunakan URLSearchParams) tampaknya

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

Jadi jika data adalah objek yang bukan URLSearchParam (atau salah satu dari beberapa jenis lain yang diperiksa sebelum ini - FormData ada dalam daftar dan digunakan mentah) maka itu akan menjadi JSON.stringified dan mungkin menyebabkan header disetel ke application/json.
Di sisi lain, jika saya memasukkan string maka itu hanya digunakan apa adanya, jadi komentar 4 Juli adeelibr adalah yang berfungsi untuk saya dan data formulir saya.

Mereka harus menyediakan tipe header default. Saya memecahkan masalah ini dengan menggunakan kode ini.
ini adalah kode vue + axios saya di sisi klien

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( 'nama', 'deskripsi' );
$respons = json_decode(file_get_contents("php://input"), benar);
foreach ( $respon sebagai $k => $v ) {
if( in_array($k, $fields_to_add) ){
$_POST[$k] = $v;
}
}
echo json_encode( $_POST );
keluar();
} lain{
echo json_encode( array( 'pesan' => 'Permintaan Tidak Valid' ) );
keluar();
}
```

Masukkan nama bidang sebagai daftar nama bidang. Ini akan secara otomatis mengubahnya menjadi pos
Semoga ini membantu

+1

+1

+1

OMG Saya tidak tahu mengirim permintaan POST dengan beberapa data formulir aplikasi/x-www-form-urlencoded sangat rumit seperti ini. Saya harus membaca ulang README berkali-kali, dan pemahaman yang salah bahwa bidang data konfigurasi dapat digunakan dengan qs.stringify(), juga bidang params.

Saat ini, tampaknya hanya metode instan yang mendukung pengiriman data formulir x-www-form-urlencoded seperti:

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

+1

tidak terselesaikan!

Ini terbuka seperti... selamanya. Lib permintaan lama digunakan untuk membuatnya sangat sederhana.

+1

+1

+1

Berikut adalah cara mudah untuk melakukannya.
Pertama-tama, silakan baca di sini: https://github.com/axios/axios#using -applicationx-www-form-urlencoded-format

Berikut adalah perbaikannya:

  1. Pergi ke: https://github.com/WebReflection/url-search-params

  2. Anda dapat menginstalnya npm atau cukup unduh perpustakaan dari sini: https://github.com/WebReflection/url-search-params/blob/master/build/url-search-params.js

  3. Jika Anda telah mengunduh perpustakaan, cukup sertakan dalam file Anda.

//For e.g. in your index.html, 
<script src="url-search-params.js"></script>
  1. Kemudian buat permintaan POST seperti ini:
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);
                });

Ini akan bekerja seperti pesona! :+1:

@aditya43 Terima kasih!

Anda sebenarnya bisa melakukan ini juga. Ini datang langsung dari Halaman Github axios. Anda harus membuat sendiri URL yang disandikan, tetapi saya baru saja mengujinya, dan berhasil.

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

Bug ini masih ada, apakah ada pembaruan?

@DZuz14 saya mencobanya dan tidak berhasil. Menggunakan axios globals, per instance, dan tidak ada apa-apa.
Tampaknya hardcoded.

+1

axios menyebalkan gunakan permintaan untuk penggantian

+1

Ini bekerja!

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

Saya mendefinisikan charset (UTF-8) di "Content-Type" dan saya memodifikasi solusi "pencegat" di atas.
Akhirnya berhasil.

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

Saya hanya menemukan kasus kors, kegagalan mengirim header permintaan opsi mengatur kegagalan lintas domain, di belakang operasi tidak akan diimplementasikan.

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

Saya mulai dengan axios, karena salah satu rekan saya merekomendasikannya kepada saya, dan upaya pertama bagi saya adalah mendapatkan token akses dari API yang berfungsi. dan saya bertabrakan dengan bug ini, dan kemudian saya kembali ke jQuery, (jujur, saya sangat memanaskan jQuery, tetapi terpaksa melakukan itu). Jadi saya pikir tidak ada cara yang lebih baik untuk membuat orang melarikan diri dari perpustakaan ini selain bug lama yang belum terpecahkan ini.

Saya menghargai semua pekerjaan yang dilakukan di perpustakaan ini, sebagai pengembang saya tahu membuat perpustakaan bukanlah tugas yang sepele, dan saya berharap untuk mengecewakan jQuery suatu hari dan kembali ke sini lagi.

@HakamFostok Saya berhasil menggunakan github/fetch dalam produksi untuk mendapatkan token api, Anda dapat menjelajahinya sebagai alternatif dari jquery.
https://github.com/github/fetch

@usopan terima kasih banyak, saya akan melihatnya

@HakamFostok
Cara termudah untuk melewati kesalahan ini adalah dengan menggunakan QS. Anda tidak perlu menginstal qs cukup gunakan langsung dengan 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'
        }
    });

Dengan itu Anda dapat menggunakan axios yang jauh lebih baik dengan ES6 ;)

Tapi Anda sepenuhnya benar. Bug ini seharusnya sudah dipecahkan berabad-abad yang lalu. Entah apa yang membuat mereka begitu lama.

@HakamFostok @Silve2611 Saya mengonfirmasi solusi qs berfungsi, saya menggunakannya untuk mendapatkan token di sini: https://github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

Ya, penyelesaian 'qs' berhasil, TETAPI, masalahnya adalah saya tidak menggunakan 'qs' dalam proyek. terima kasih atas bantuannya, saya akhirnya membuang perpustakaan ini dan menggunakan perpustakaan ajax https://github.com/fdaciuk/ajax itu jauh lebih baik, dan saya mendorong semua orang untuk menyingkirkan perpustakaan ini dan bermigrasi ke sana.

qs diunduh hampir 60 juta kali sebulan, 4.8Kb di-gzip.
Express, body-parser, request, superagent, dan banyak lainnya bergantung padanya, Anda dapat menambahkannya tanpa rasa takut ke proyek Anda.

@HakamFostok Sejauh yang saya tahu itu adalah bagian dari modul inti sehingga Anda tidak perlu menginstalnya secara manual jika versi simpul Anda mutakhir.

Saya hanya tidak ingin menginstal perpustakaan apa pun, yang tidak saya perlukan, hanya untuk membuat solusi untuk masalah yang harus diselesaikan dari bertahun-tahun yang lalu. Sekadar informasi, Proyek saya bukan proyek Bereaksi atau saya menggunakan simpul, saya menggunakan ASP.NET MVC dengan vue.js

Modul "querystring" sudah ada di dalamnya, dan sejauh yang saya tahu, ia melakukan hal yang sama.

@axios Bagaimana dengan bug yang masih ada ini?

@HakamFostok Saya juga menggunakan vue dan itu benar-benar berfungsi dengan baik dengan axios. Pertimbangkan untuk menggunakan qs karena axios memiliki banyak keuntungan jika Anda ingin menggunakan async menunggu.

Masalah masih terjadi dan saya harus menggunakan qs secara manual seperti ini

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

Apakah ini benar-benar bug? Saya melakukan url yang disandikan dalam dua proyek berbeda dengan aksioma, dan itu berfungsi dengan baik. Komentar yang saya posting di sini sebelumnya adalah satu-satunya hal yang saya atur, dan berfungsi.

Tentu saja itu adalah bug! Ini tidak berfungsi seperti yang dijelaskan dalam dokumen. Juga tidak masuk akal untuk menambahkan langkah tambahan untuk sesuatu yang harus ditangani dengan jelas oleh axios. Metode lain tidak membutuhkan langkah.

Ya, tidak masuk akal jika Anda harus menambahkan langkah tambahan.
Jika saya ingin memposting

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

Saya harus menulis seperti ini

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

Saya memiliki masalah yang sama dengan pengaturan Content-Type ke application/vnd.api+json , mirip dengan #340, yang sayangnya ditutup tanpa resolusi.

Solusi saya adalah merangkai data objek untuk mengirim Content-Type , yang agak retas, karena kita harus berurusan dengan cara axios pengaturan application/json;charset=utf-8 saat menanganinya adalah dengan data objek.

Semoga kami memiliki lebih banyak kemampuan dalam menyetel Content-Type secara manual daripada meminta axios "menebaknya" untuk kami.

Itu harus "menebak" itu untuk kita atau melempar kesalahan yang bisa kita tangani. Saat ini semuanya terlihat baik-baik saja tetapi paransnya jelas tidak benar. Seorang pemula yang bekerja dengan axios tidak akan dapat melacak kesalahan seperti itu. Setidaknya itu harus didokumentasikan dengan benar.

+1 Hanya menghabiskan 2 jam melacak masalah ini. Setidaknya akan menghargai penjelasan/catatan yang lebih baik di readme. Akan memperbarui jika qs memecahkan masalah.

PEMBARUAN: Menggunakan reaksi, qs berhasil untuk saya. Ini adalah solusi saya. Saya membutuhkan parameter formulir dan parameter kueri dalam kasus saya.

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

Saya perlu menggunakan Axios dengan React untuk melakukan proses login dan setelah berjuang berjam-jam dengan masalah ini, solusinya adalah membuat objek secara mandiri yang diperlukan untuk membuat permintaan.

Kesalahannya adalah: unsupported_grant_type

Pekerjaan ini.

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

Cara lain ini tidak berhasil.

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

Setelah 2 tahun dan bug ini masih belum teratasi

+1

+1

+1 masih ada masalah

+1

+1
ping @mzabriskie @nickuraltsev

Masalah di sisi nodejs adalah bahwa salah satu dependensi, follow-redirects , menghapus header tipe konten:

screenshot from 2018-05-15 17-17-46
https://github.com/olalonde/follow-redirects/blob/1b6340f83ad5596a0a38c16a7113692bd90301f2/index.js#L188 -L192

+1 pasti mengalami masalah yang sama di sini

+1

perbaiki ini akhirnya untuk tidak menggunakan peretasan sebagai qs (tapi ya, qs berfungsi)

hejo

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

perbaiki ini akhirnya untuk tidak menggunakan peretasan sebagai qs


Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/axios/axios/issues/362#issuecomment-390337824 , atau bisu
benang
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
.

Sepertinya masalah ini tidak akan diperbaiki

Ini mulai konyol!

Bahkan "f**k you, kami tidak akan pernah memperbaikinya!" :/

+1

+1

Tampaknya beberapa pahlawan, memperbaikinya dan membuat versi tertentu "aaxios"
Izinkan pengaturan tipe konten
Tidak mengujinya, pindah untuk mengambil

+1

+1

+1

+1

👍
seperti yang dikatakan @camposjorge , kami mungkin melihat perbaikan (segera?) Terima kasih kepada https://github.com/axios/axios/pull/1544

tidak ada perbaikan?

+1

memecahkannya! itu bukan masalah axios, hanya tentang cross origin

set { header: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
dan
cukup gunakan transformRequest dari opsi axios

transformRequest: [fungsi (data) { format kembali (data) }],

fungsi format yang digunakan untuk mengurai {a:"a",b:"b"} menjadi "a=a&b=b"

+1, dan tidak ada solusi di atas yang berhasil

+1

Sepertinya banyak orang masih menunggu perbaikan untuk masalah ini, termasuk saya sendiri - tentunya setelah sekian lama pasti ada beberapa solusi yang diusulkan untuk ini.

memperbaiki masalah ini dengan qs.stringify dalam reaksi.

Anda hanya perlu qs.stringify data sebelum meneruskannya ke axios.post

masalahnya adalah bahwa secara default Token CSRF terdaftar sebagai header umum dengan Axios jadi
untuk memecahkan masalah ini

1- ganti baris ini di bootstrap.js "

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

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

jika (tanda) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} lain {
console.error('Token CSRF tidak ditemukan: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
"
dengan baris ini"
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"
2- instal modul qs dengan npm klik di sini

3- tentukan const dari qs seperti di bawah ini:
const qs = membutuhkan('qs');
4- gunakan axios secara default seperti ini:
axios.post('link Anda di sini',qs.stringify({
'a1': 'b1',
'a2 ':'b2'
}))
.kemudian(tanggapan => {

                     alert('ok');

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

Dengan ini saya dapat mengirimkan formulir menggunakan axios terlepas dari fakta bahwa tipe konten tidak dapat diubah pada axios

```
const { nama lengkap, email, kata sandi, telepon } = this.state;
aksio(url, {
metode: "POST",
header: {
Terima: "aplikasi/json",
"Content-Type": "application/x-www-form-urlencoded"
},
data: this.serialize({
nama: nama lengkap,
email: email,
kata sandi: kata sandi,
telepon: telepon
})
})
.kemudian(tanggapan => {
console.log(tanggapan);
})
.catch(kesalahan => {
console.log(error.respon);
});

bersambung = obj => {
biarkan str = [];
untuk (biarkan p di obj)
if (obj.hasOwnProperty(p)) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
kembali str.join("&");
};

Menabrak. Konyolnya, setelah bertahun-tahun, bug yang mengganggu ini masih belum diperbaiki.

Menabrak. Masalah yang sama di sini, perbaikan diperlukan af.

@mzabriskie

Bukankah ini harus ditutup sebagai tetap?
Mengujinya dengan tajuk yang sesuai dan mereka diatur dengan benar dalam permintaan.
Header dalam permintaan
Mengatur tajuk di sini

perpustakaan form-urlencoded membantu saya memperbaikinya (untuk sementara).

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

@mzabriskie

Bukankah ini harus ditutup sebagai tetap?
Mengujinya dengan tajuk yang sesuai dan mereka diatur dengan benar dalam permintaan.
Header dalam permintaan
Mengatur tajuk di sini

tidak ini tidak bisa ditutup!!!
Semua orang mengalami masalah dan tidak menemukan solusi. Ini harus bekerja tanpa mengatur tajuk atau tajuk standar harus ditetapkan.
Jika tidak, kesalahan harus dilontarkan untuk menunjukkan di mana masalahnya.
Juga dokumentasi harus diperbarui.

Itu masih rusak!

Menabrak. Bug ini masih di tempatnya dan terasa luar biasa!

menabrak

Bug ini masih hidup!

Saya juga mengalami bug ini di sini.

masih menjijikan disini

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

Ini bekerja untuk saya. Saya merobeknya dari aplikasi yang sedang saya kembangkan, bagian ini untuk memverifikasi recaptcha google.

Masih mengalami masalah yang sama...

Pengaturan sebagai default tidak berfungsi:
axios.defaults.headers.common['Accept'] = 'application/json'; // working axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; // NOT working

Dan juga pengaturan dalam permintaan tidak berfungsi:
axios.get(url, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })

@aaroninn ini sepertinya bukan masalah yang sama, silakan buka masalah baru jika menurut Anda masalah Anda terkait dengan axios (yang tampaknya lebih terkait dengan penggunaan dasar vuex untuk saya, tapi saya tidak yakin)

utas ini sudah penuh +1 , tidak perlu mengumpulkan masalah lain di sini

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

@mzabriskie tampaknya Anda adalah penulis komit yang memperkenalkan masalah ini, tidak bisakah Anda melakukan apa-apa (jika Anda bahkan tidak mengerti mengapa Anda melakukannya sejak awal, Anda dapat/harus mengembalikannya, Baik?)

Terima kasih sebelumnya

Ini 2018! Jawaban mana, di atas, yang tidak boleh saya turunkan?

Ceritakan lagi mengapa kita semua menyukai Axios?

Masalah ini perlu diperbaiki? Atau sukarela, saya bertanya, sudah dibuka sejak 2 tahun tetapi tidak ada yang memperbaikinya. Apakah itu sukarela dan tidak perlu diperbaiki?

@jeremycare Saya baru saja membuat PR untuk masalah itu... Saya pikir itu "bug" yang sangat mengganggu dan harus diperbaiki. Terutama sangat mudah untuk memperbaiki ini dan menyingkirkan masalah itu.

Guys, saya pikir saya mengerti mengapa tiket ini masih dibuka.
Orang yang mengatakan bahwa itu berfungsi untuk mereka sekarang menggunakan modul "qs", mereka yang mengatakan itu tidak berfungsi menggunakan modul "querystring".
Saya melihat orang-orang juga mengalami masalah dengan tajuk, tiket ini sangat lama untuk membaca semuanya dan mungkin saya tidak mengerti segalanya tentang masalah dalam tiket ini, tetapi jika seseorang tidak dapat membuat permintaan dengan data formulir berfungsi, periksa ini sebelum mencoba hal-hal lain:

Menjelaskan semuanya di sini: https://github.com/axios/axios/issues/1894

Mengecewakan melihat swap di fetch asli di browser bekerja secara instan dengan pengaturan Content-Type ketika Axios gagal mengaturnya. Interop antar platform adalah nilai jual terbesarnya bagi saya.

Saya dapat melihat dalam metode transformRequest bahwa tajuk disetel tetapi tidak pernah sampai ke permintaan yang sebenarnya. Saya tidak dapat menggunakan modul qs karena saya hanya mengirim badan teks.

Untuk mengulangi apa yang saya alami: Saya tidak dapat mengatur header Content-Type di browser menggunakan aksioma karena ditimpa. Saya mengirim payload string (tanpa formdata), jadi modul qs / querystring tidak relevan untuk kasus saya.

Apa yang bisa kita lakukan untuk memperbaiki ini?

EDIT: Untuk saat ini saya hanya akan menggunakan fetch ketika di browser, tetapi jenis ini meniadakan seluruh poin untuk menggunakan aksioma untuk saya.

EDIT2: Saya telah membangun perpustakaan saya sendiri - cowl -untuk menangani permintaan saya di berbagai lingkungan (menargetkan Node/Browser/React-Native). Ini sama sekali bukan pengganti axios dan kekayaan fiturnya, tetapi ini mendukung semua dasar-dasarnya.

Punya masalah yang sama. Dan jika saya menyetel kunci ke hal lain, itu berfungsi, kecuali untuk "Jenis Konten"! Tolong bantu!

Saya sebenarnya harus membuat aplikasi hybrid berantakan lainnya dengan menggunakan fetch di browser dan aksio di node dan di dalam react-native. Sepertinya lucu bahwa seperti ini dan bukan sebaliknya. Sangat berharap untuk melihat ini segera ditangani sehingga saya dapat menghapus patch monyet saya.

Saya pikir penting untuk menyadari bahwa ini jelas bukan hanya masalah dengan querystring.. Isi tubuh saya hanyalah teks mentah tanpa parameter, namun saya tidak dapat mengirimkannya menggunakan axios dengan Content-Type .

Saya mencoba menggunakan posting, berfungsi dengan baik, default posting adalah json

Saya mengalami bug ini sekarang ... jadi tidak ada solusi untuk ini setelah bertahun-tahun? Wow...

Saya membuat PR yang akan memperbaiki masalah lebih dari dua bulan yang lalu... Saya tidak mengerti mengapa itu tidak digabungkan?!

Saya membuat PR yang akan memperbaiki masalah lebih dari dua bulan yang lalu... Saya tidak mengerti mengapa itu tidak digabungkan?!

Perlu diingat bahwa tidak ada yang mendorong apa pun sejak september tahun lalu, mungkin mereka mencari pengelola?. Juga, saya pikir Anda melewatkan tes ketika saya membandingkan PR Anda dengan: https://github.com/axios/axios/pull/1544/files

@mzabriskie bisakah Anda mengambil tanggung jawab untuk menggabungkan salah satu dari PR ini? Karena saat ini beberapa perangkat lunak memerlukan permintaan get untuk memiliki set tipe konten (params RoR misalnya: https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request). Solusi yang ditentukan dalam https://github.com/axios/axios/issues/362#issuecomment -229817415 sepertinya merupakan cara yang tepat dan yang terpenting akan menyelesaikan semua peretasan putus asa seperti menggunakan fetch untuk kasus penggunaan khusus ini.

Saya pindah ke halaman got , karena axios tampaknya ditinggalkan.

Jadi Axios secara resmi tidak dapat mengirim permintaan dengan 'Content-Type': 'application/x-www-form-urlencoded' atau apakah solusi @ChBernat benar-benar berfungsi?

Apakah ada solusi untuk masalah ini atm?

Apakah ada solusi untuk masalah ini atm?

Cari satu tahun di sini dan Anda akan melihat banyak solusi... Meskipun saya akan merekomendasikan, seperti orang lain dan termasuk saya sendiri, beralih dari axios. Itu ditinggalkan...

Wow... mereka seharusnya meninggalkan proyek pada saat ini, saya tahu saya. Hampir 3 tahun sejak masalah pertama kali dilaporkan dan sekarang kami masih mencoba menyelesaikan masalah ini? Sulit dipercaya. Saya suka open source jadi saya tidak menyembunyikan perasaan sakit untuk proyek ini yang tidak memiliki pengelola tapi ... ini digunakan oleh BANYAK orang jadi paling tidak yang bisa Anda lakukan adalah meninggalkannya sehingga kita semua tahu proyek ini sudah mati/sekarat. Terima kasih.

@justintime4tea Apakah Anda punya rekomendasi baru?

got

@kslr mendapat atau meminta sepertinya semua orang juga mulai bermigrasi. Saya mencoba untuk tetap menggunakan Axios tetapi saya pikir itu akan berakhir begitu saja ketika saya menulis beberapa lapisan abstraksi di atasnya sehingga saya dapat menukar perpustakaan permintaan HTTP yang mendasarinya dan kemudian jika saya menggunakan perpustakaan berbeda yang memiliki "built -in" klien HTTP yang digunakannya, biarkan saja.

Saya mencoba sesuatu seperti ini dan berhasil untuk saya.
Mungkin bukan solusi terbaik tetapi itu benar-benar dapat membantu (saya pikir), saran apa pun, jika solusi ini mengerikan, dipersilakan.

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

Saya telah menghapus tajuk, dan sepertinya sudah diterima dengan baik.

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

Saya memiliki dua masalah menggunakan RoR sebagai backend.

konteks saya:

Saya punya proyek menggunakan vue-resource yang sudah usang dan semuanya berfungsi dengan baik tanpa konfigurasi tambahan. Dan sekarang, saya mengatur dependensi proyek dan mengganti dependensi yang tidak digunakan lagi, jadi saya mengganti vue-resource dengan axios ;)...


Tapi, kami memiliki beberapa masalah dan di bawah ini saya akan membagikan apa yang saya lakukan untuk menyelesaikan masalah ini. Mungkin membantu seseorang! Jadi maaf jika saya belum membantu Anda seperti yang Anda harapkan

Masalah pertama , masalahnya sama dengan masalah ini, saya selesaikan menggunakan:

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

Sekarang, params seperti:

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

akan diubah menjadi:
http://xxxx/?q%5Bsearch%5D=something&q%5Bsort%5D=asc

diuraikan ini akan menjadi:

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

Masalah kedua , RoR mengembalikan respons HTML alih-alih respons JSON:

Masalah ini terjadi karena backend kita harus membedakan permintaan AJAX dari jenis permintaan lainnya.

Secara default, vue-resource sudah menyetel header X-Requested-With seperti yang diharapkan. Tapi, tidak. Jadi, saya harus mendefinisikan kunci ini di header permintaan. Konfigurasi global Axios saya pada akhirnya adalah sebagai berikut:

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';

===

Jika Anda menggunakan Rails sebagai backend dan tidak ada solusi yang bekerja untuk Anda, beri tahu saya, mungkin saya membantu Anda =).

Saya sedang mengerjakan reaksi asli dan mendapatkan kesalahan 400 permintaan buruk saat menggunakan ini:
impor * sebagai qs dari 'querystring';
axios.post(url,qs.stringify({
'nama_pertama': 'dalam',
'nama_belakang': 'palotra',
}),{
header : {
'Content-Type': 'application/x-www-form-urlencoded; rangkaian karakter = UTF-8'
}
}).lalu((tanggapan)=>{
console.log('berfungsi')
}).catch((kesalahan)=>{
console.log('kesalahan')
console.log(kesalahan)
})

jadi, bagaimana mengatasi masalah ini?

ada solusi :(

Dipecahkan Oleh qs

{ data: qs.stringify(bodyObject) }

Sedih melihat begitu banyak orang bingung dalam masalah ini. Saya telah mencoba yang terbaik untuk membaca komentar-komentar itu. Tetapi tampaknya telah melibatkan banyak masalah lain.

Semuanya, maafkan saya untuk menutupnya. Jika seseorang dapat membuka masalah baru untuk menggambarkan masalahnya dengan jelas, itu akan sangat berterima kasih kepada Anda.

Hai semuanya,

Saya pikir saya akan berpadu ketika saya menyia-nyiakan hampir satu hari kerja penuh dalam hidup saya untuk mencoba menyelesaikan ini. Ini mungkin membantu sebagian, atau seluruhnya, jadi semoga ini bermanfaat.

Balasan saya berasal dari melihat berbagai alasan mengapa POST gagal dengan Axios mulai dari:

  1. 400 permintaan Buruk
  2. Tidak dapat memposting dengan Header khusus (seperti utas ini)
  3. Perlu membuat serial/stringify data/payload

Saya menghadapi masalah yang sama dengan semua orang di utas ini dengan Permintaan Buruk 400 ketika meneruskan header khusus ke Axios di konfigurasi seperti ini, dan mencoba banyak respons di sini, seperti menggunakan qs.stringify(), mengatur data di konfigurasi ke null atau {} tidak berhasil.

1) Catatan - Menambahkan blok .catch() dan mencatat kesalahan seperti itu sangat membantu saya karena saya dapat memunculkan kesalahan yang tidak terlalu samar. Saya dapat menggunakan pesan untuk men-debug dan akhirnya mengetahui masalah yang saya alami.

2) Penting di blok .then() untuk mengembalikan response.data , jika tidak, Anda akan mengalami kesalahan ini:

Converting circular structure to JSON

Sekarang masalah saya adalah badan api POST bukan yang diinginkan titik akhir, tetapi saya tidak dapat melihatnya sampai saya dapat mencatat kesalahan.

Selanjutnya, saya juga menggunakan NestJS dan HttpService, yang merupakan pembungkus di sekitar Axios, dan itu semakin memperumit masalah karena kesalahan sebenarnya tidak muncul di callback catchError di pipa saya.

Jadi inilah solusi untuk Axios dan NestJS murni.

Aksio:

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

NestJS:

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) Tambahkan blok .catch() untuk mencatat kesalahan sebenarnya dengan benar, jika tidak maka 400 Permintaan Buruk
2) Pastikan tanda tangan data Anda cocok dengan apa yang diharapkan API. Ini adalah bagian dari alasan adanya kesalahan karena kode 400 adalah 'Permintaan Buruk'
3) Kembalikan response.data di blok .then() jika Anda menggunakan Axios, atau di operator peta jika Anda menggunakan NestJS atau Anda akan mendapatkan kesalahan Converting circular JSON

Maaf untuk posting yang panjang dan semoga sukses semuanya!

Bersulang

Saya sedang mengerjakan reaksi asli dan mendapatkan kesalahan 400 permintaan buruk saat menggunakan ini:
impor * sebagai qs dari 'querystring';
axios.post(url,qs.stringify({
'nama_pertama': 'dalam',
'nama_belakang': 'palotra',
}),{
header : {
'Content-Type': 'application/x-www-form-urlencoded; rangkaian karakter = UTF-8'
}
}).lalu((tanggapan)=>{
console.log('berfungsi')
}).catch((kesalahan)=>{
console.log('kesalahan')
console.log(kesalahan)
})

pekerjaan ini untuk saya. dengan query stringfy terima kasih banyak.
kamu menyelamatkan hidupku

Anda dapat menggunakan perpustakaan seperti qs sebagai gantinya:

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

Solusi Anda berhasil. Terima kasih banyak!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat