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.

이 문제를 해결하기 위해 q 라이브러리와 함께 인터셉터를 사용합니다. 나를 위해 잘 작동합니다.

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시간 전에 댓글을 남겼습니다.
이 문제를 해결하기 위해 q 라이브러리와 함께 인터셉터를 사용합니다. 나를 위해 잘 작동합니다.

훌륭하지만 다른 것을 설치하여 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(사용자 이름, 암호) {
반환 축({
방법: '게시',
url: '종점',
데이터: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

충돌. 기본값을 설정하면 항상 존중될 것이라고 확실히 가정합니다. Axios는 특정 상황에서 기본값을 확실히 무시하여 가난한 사람들에게 문제를 일으킵니다.

이것이 발생한 더 구체적인 병합은 다음과 같습니다. https://github.com/mzabriskie/axios/pull/195/files

이 문제에 대해 +1입니다.
내 Tomcat 구성에 무엇이 잘못되었는지 알아내려고 3시간 넘게 보냈고 분명히 내 헤더가 서버로 가는 도중에 도난당한 것 같습니다. 해결 방법이 도움이 되지 않았습니다. 하나님이 헤더를 저장!

@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

const 쿼리 문자열 = 요구('쿼리 문자열');

로그인(){
var _this = 이것;
this.$http({
URL: URL,
방법: '게시',
데이터: querystring.stringify({
이메일: 이메일,
비밀번호: 패스
}),
헤더: {
'콘텐츠 유형': '응용 프로그램/x-www-form-urlencoded'
}
}).then(함수(응답) {
console.log(응답);
}).catch(함수(오류) {
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 멋져요, 효과가 있어서 기쁩니다.

_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가 포스트 데이터를 HTTP 요청의 본문에 추가하기 전에 자동으로 인코딩하지 않기 때문에 요청을 보내기 전에 인코딩해야 하기 때문입니다. 그것이 쿼리 문자열이 하는 일입니다. {id:32, name:'john'} 를 사용하고 id=32&name=john 와 같은 것을 생성한 다음 axios는 이를 포스트 요청의 본문으로 설정합니다.

다음 요청을 통해 이를 테스트할 수 있습니다.

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

위의 코드와 같은 결과가 나와야 합니다.

오픈한지 1년이 넘었는데 아직도 고쳐지지가 않네요....

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

Patch 요청에서 _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이고 'content-type ' 헤더가 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 데이터 = {이름: '내 이름'}
const 형식 = '데이터=' + JSON.stringfy(데이터)
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);
    }
);

@skuarch
데이터 대신 매개변수 사용

그것이 작동한다면 지금까지 가장 깨끗한 솔루션입니다.

@oshalygin 매개변수를 쿼리 문자열로 설정하고 사후 변수로 보내지 않습니다.

간단한 양식을 게시할 수 없는 ajax 라이브러리? 진짜?

1

누구나 content-type을 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 ( 세트( $_POST ) ) {
$fields_to_add = array( '이름', '설명' );
$response = json_decode(file_get_contents("php://input"), true);
foreach ( $k => $v 로서의 $response ) {
if( 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 요청을 보내는 것이 이렇게 복잡한지 몰랐습니다. README를 여러 번 다시 읽어야 하며 구성의 데이터 필드를 qs.stringify() 및 params 필드와 함께 사용할 수 있다는 것을 잘못 이해했습니다.

현재로서는 다음과 같은 x-www-form-urlencoded 양식 데이터 전송을 지원하는 인스턴스 메소드만 있는 것 같습니다.

• axios#post(url[, 데이터[, 구성]])
• axios#put(url[, 데이터[, 구성]])
• axios#patch(url[, 데이터[, 구성]])

+1

해결되지 않았습니다!

그것은 마치... 영원히 열려있습니다. 예전 request 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 감사합니다!

실제로 이렇게 할 수도 있습니다. 이것은 axios Github 페이지에서 직접 가져온 것입니다. 인코딩된 URL을 직접 만들어야 하지만 방금 테스트했는데 작동합니다.

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

이 버그는 여전히 존재합니다. 업데이트가 있습니까?

@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"에서 charset(UTF-8)을 정의하고 위의 "interceptors" 솔루션을 수정했습니다.
마침내 작동합니다.

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로 시작했고, 저를 위한 첫 번째 노력은 작동하는 API에서 액세스 토큰을 얻는 것이었습니다. 이 버그와 충돌하고 jQuery로 돌아 왔습니다. (솔직히 jQuery를 너무 많이 가열했지만 그렇게해야했습니다). 그래서 저는 사람들이 이 오래되고 해결되지 않은 버그보다 이 라이브러리에서 도망치게 만드는 더 좋은 방법이 없다고 생각합니다.

이 라이브러리에서 수행된 모든 작업에 감사드립니다. 개발자로서 라이브러리를 만드는 것이 쉬운 일이 아니라는 것을 알고 있으며 언젠가 jQuery를 중단하고 다시 여기로 돌아올 수 있기를 바랍니다.

@HakamFostok 저는 api 토큰을 얻기 위해 프로덕션에서 github/fetch를 성공적으로 사용하고 있습니다. 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 는 한 달에 거의 6천만 번 다운로드되며 4.8Kb gzip으로 압축됩니다.
Express, body-parser, request, superagent 및 기타 많은 것들이 이에 의존하고 있으므로 두려워하지 않고 프로젝트에 추가할 수 있습니다.

@HakamFostok 내가 아는 한 코어 모듈의 일부이므로 노드 버전이 최신 버전이면 수동으로 설치할 필요가 없습니다.

나는 단지 몇 년 전에 해결해야 할 문제에 대한 해결 방법을 만들기 위해 필요하지 않은 라이브러리를 설치하고 싶지 않습니다. 참고로 내 프로젝트는 React 프로젝트도 아니고 node도 사용하지 않고 vue.js와 함께 ASP.NET MVC를 사용하고 있습니다.

"querystring" 모듈이 내장되어 있고 내가 아는 한 동일합니다.

@axios 지속되는 이 버그는 어떻습니까?

@HakamFostok 나도 vue를 사용하고 있으며 axios와 정말 완벽하게 작동합니다. async await를 사용하려는 경우 axios에 많은 이점이 있으므로 qs 사용을 고려하십시오.

문제가 계속 발생했고 다음과 같이 q를 수동으로 사용해야 합니다.

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

이것도 정말 버그인가요? 저는 axios를 사용하여 두 개의 다른 프로젝트에서 인코딩된 URL을 수행하고 있으며 제대로 작동합니다. 이전에 여기에 게시한 댓글은 내가 설정한 유일한 항목이며 작동합니다.

물론 버그입니다! 문서에 설명된 대로 작동하지 않습니다. 또한 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 를 보내기 위해 개체 데이터를 문자열화하는 것이었습니다. 이는 처리할 때 application/json;charset=utf-8 를 설정하는 axios 방식을 처리해야 하기 때문에 약간 해키합니다. 개체 데이터.

axios가 "추측"하도록 하는 것보다 수동으로 Content-Type 를 설정하는 데 더 많은 기능이 있기를 바랍니다.

그것은 우리를 위해 그것을 "추측"하거나 우리가 처리할 수 있는 오류를 던져야 합니다. 현재 모든 것이 괜찮아 보이지만 parans는 분명히 정확하지 않습니다. axios로 작업하는 초보자는 그러한 오류를 추적할 수 없습니다. 최소한 올바르게 문서화해야 합니다.

+1 이 문제를 추적하는 데 2시간이 걸렸습니다. 최소한 readme에서 더 나은 설명/참고를 해주시면 감사하겠습니다. 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
ping @mzabriskie @nickuraltsev

nodejs 측의 문제는 종속성 중 하나인 follow-redirects 가 content-type 헤더를 삭제하고 있다는 것입니다.

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

+1 확실히 여기에서 동일한 문제가 발생합니다.

+1

해킹을 qs로 사용하지 않도록 이 문제를 최종적으로 수정합니다(예, qs는 작동함).

헤이

1. maj 2018 23.31 skrev "Leonid 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 문제가 아니라 교차 원점에 관한 것입니다.

set { headers: {'Content-Type': 'application/x-www-form-urlencoded; 문자 집합=UTF-8'}}
그리고
axios 옵션에서 transformRequest를 사용하십시오.

transformRequest: [함수(데이터) { 반환 형식(데이터) }],

{a:"a",b:"b"}를 "a=a&b=b"로 구문 분석하는 데 사용되는 형식 함수

+1, 위의 솔루션 중 어느 것도 작동하지 않았습니다.

+1

많은 사람들이 여전히 이 문제에 대한 수정을 기다리고 있는 것 같습니다. 저를 포함합니다. 확실히 이 시간이 지나면 이에 대한 제안된 솔루션이 있어야 합니다.

반응에서 qs.stringify로 이 문제를 수정했습니다.

데이터를 axios.post에 전달하기 전에 qs.stringify해야 합니다.

문제는 기본적으로 CSRF 토큰이 Axios에 공통 헤더로 등록되어 있으므로
이 문제를 해결하기 위해

1- bootstrap.js에서 이 줄을 교체하십시오 "

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

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

if (토큰) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = 토큰.내용;
} 또 다른 {
console.error('CSRF 토큰을 찾을 수 없습니다: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
"
이 줄로 "
window.axios.defaults.headers.post['콘텐츠 유형'] = '응용 프로그램/x-www-form-urlencoded';
"
2- npm으로 qs 모듈을 설치하려면 여기를 클릭하십시오.

3- 아래와 같이 q의 const를 정의합니다.
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(URL, {
방법: "POST",
헤더: {
수락: "응용 프로그램/json",
"콘텐츠 유형": "application/x-www-form-urlencoded"
},
데이터: this.serialize({
이름: 전체 이름,
이메일: 이메일,
비밀번호: 비밀번호,
전화: 전화
})
})
.then(응답 => {
console.log(응답);
})
.catch(오류 => {
console.log(오류.응답);
});

직렬화 = obj => {
하자 str = [];
(obj에서 p를 보자)
if (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',
  },
});

이것은 나를 위해 작동합니다. 현재 개발중인 앱에서 찢었습니다. 이 부분은 구글의 리캡차를 확인하기 위한 부분입니다.

여전히 같은 문제가 있습니다 ...

기본값으로 설정하면 작동하지 않습니다.
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을 작성했습니다... 정말 짜증나는 "버그"이며 수정되어야 한다고 생각합니다. 특히 이 문제를 수정하고 제거하는 것은 정말 쉽습니다.

얘들아, 이 티켓이 아직 열려있는 이유를 알 것 같아.
작동한다고 말하는 사람들은 이제 "q" 모듈을 사용하고 작동하지 않는다고 말하는 사람들은 "querystring" 모듈을 사용합니다.
헤더에 문제가 있는 사람들도 봤습니다. 이 티켓은 모든 것을 읽는 데 너무 오래 걸리고 이 티켓의 문제에 대한 모든 것을 이해하지 못할 수도 있지만 누군가 양식 데이터 작업을 요청할 수 없다면 다른 것을 시도하기 전에 이것을 확인하십시오.

여기에 모든 설명: https://github.com/axios/axios/issues/1894

Axios가 설정에 실패했을 때 브라우저에서 기본 fetch 의 스왑 인이 Content-Type 설정으로 즉시 작동하는 것을 보는 것은 실망스럽습니다. 플랫폼 간의 Interop은 저에게 가장 큰 판매 포인트였습니다.

transformRequest 메소드에서 헤더가 설정되어 있지만 실제 요청에는 도달하지 않는 것을 볼 수 있습니다. 단순히 텍스트 본문을 보내는 중이므로 qs 모듈을 사용할 수 없습니다.

내가 경험한 것을 다시 표현하자면: axios를 사용하여 브라우저에서 Content-Type 헤더를 덮어쓸 수 없습니다. 문자열 페이로드(formdata 없음)를 보내고 있으므로 qs / querystring 모듈은 제 경우와 관련이 없습니다.

이 문제를 해결하기 위해 무엇을 할 수 있습니까?

편집: 지금은 브라우저에 있을 때 가져오기를 사용하려고 합니다.

EDIT2: 여러 환경(Node/Browser/React-Native 대상)에서 내 요청을 처리하기 위해 자체 라이브러리( cowl )를 구축했습니다. axios와 풍부한 기능을 대체하는 것은 절대 아니지만 모든 기본 사항을 지원합니다.

같은 문제가 발생했습니다. 그리고 키를 다른 것으로 설정하면 "Content-Type"을 제외하고는 작동합니다! 도와주세요!

실제로 브라우저에서 가져오기를 사용하고 노드와 반응 네이티브 내에서 axios를 사용하여 또 다른 지저분한 하이브리드 앱을 만들어야 했습니다. 그 반대가 아니라 이런 식이라는 게 웃긴 것 같다. 이 문제가 곧 해결되어 원숭이 패치를 제거할 수 있기를 진심으로 바랍니다.

이것이 쿼리스트링만의 문제가 아니라는 것을 깨닫는 것이 중요하다고 생각합니다. 내 본문 내용은 매개변수가 없는 원시 텍스트이지만 Content-Type 가 있는 axios를 사용하여 보낼 수는 없습니다.

나는 포스트를 사용해 보았지만 잘 작동한다. 포스트의 기본값은 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에 지정된 솔루션은 올바른 방법으로 보이며 무엇보다 이 특정 사용 사례에 대해 가져오기를 사용하는 것과 같은 모든 절망적인 해킹을 해결할 것입니다.

axios 가 버려진 것 같아서 got 패키지로 옮겼습니다.

따라서 Axios는 공식적으로 'Content-Type': 'application/x-www-form-urlencoded'로 요청을 보낼 수 없거나 @ChBernat 솔루션이 실제로 작동합니까?

ATM에서 이 문제에 대한 해결 방법이 있습니까?

ATM에서 이 문제에 대한 해결 방법이 있습니까?

여기에서 1년을 검색하면 많은 해결 방법을 볼 수 있습니다... 다른 사람들과 저를 포함하여 제가 권하고 싶지만, axios에서 계속 진행하십시오. 버려진거야...

와우... 그들은 이 시점에서 프로젝트를 포기해야 합니다. 저도 알고 있습니다. 문제가 처음 보고된 지 거의 3년이 지났지만 여전히 이 문제를 해결하기 위해 노력하고 있습니까? 믿을 수 없는. 저는 오픈 소스를 좋아하기 때문에 이 프로젝트에 대해 어떤 나쁜 감정도 품고 있지 않습니다. 유지 관리자가 없지만... 그것은 많은 사람들이 사용하므로 당신이 할 수 있는 최소한의 것은 그것을 버리는 것이므로 우리 모두는 이 프로젝트가 죽었다/죽어가고 있다는 것을 알 수 있습니다. 감사 해요.

@justintime4tea 새로운 추천이 있습니까?

got

@kslr 이 얻었거나 요청한 내용은 다른 모든 사람도 마이그레이션을 시작한 것처럼 보입니다. 저는 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은 JSON 응답 대신 HTML 응답을 반환합니다.

이 문제는 백엔드가 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

반응 네이티브에서 작업 중이며 다음을 사용할 때 잘못된 요청 400 오류가 발생합니다.
* '쿼리 문자열'에서 qs로 가져오기;
axios.post(url,qs.stringify({
'이름': '깊은',
'성': '팔로트라',
}),{
헤더: {
'콘텐츠 유형': '응용 프로그램/x-www-form-urlencoded; 문자 집합=UTF-8'
}
}).then((응답)=>{
console.log('작업')
}).catch((오류)=>{
console.log('오류')
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와 Axios의 래퍼인 HttpService도 사용하고 있는데, 실제 오류가 내 파이프의 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)}');
});

네스트JS:

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) 데이터 서명이 API가 기대하는 것과 일치하는지 확인하십시오. 이것은 코드 400이 '잘못된 요청'이기 때문에 오류가 존재하는 이유 중 일부입니다.
3) Axios를 사용하는 경우 .then() 블록에서 response.data 를 반환하고 NestJS를 사용하는 경우 지도 연산자에서 반환합니다. 그렇지 않으면 Converting circular JSON 오류가 발생합니다.

긴 글 죄송하고 모두들 행운을 빕니다!

건배

반응 네이티브에서 작업 중이며 다음을 사용할 때 잘못된 요청 400 오류가 발생합니다.
* '쿼리 문자열'에서 qs로 가져오기;
axios.post(url,qs.stringify({
'이름': '깊은',
'성': '팔로트라',
}),{
헤더: {
'콘텐츠 유형': '응용 프로그램/x-www-form-urlencoded; 문자 집합=UTF-8'
}
}).then((응답)=>{
console.log('작업')
}).catch((오류)=>{
console.log('오류')
console.log(오류)
})

나를 위한 이 작품. 쿼리 stringfy 감사합니다.
넌 내 목숨을 구해

대신 qs와 같은 라이브러리를 사용할 수 있습니다.

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

솔루션이 작동 중입니다. 정말 감사합니다!