Axios: axios.post 메소드에 헤더 추가하기

이것은 버그가 아니며 예상대로 작동합니다.
헤더와 콘텐츠 유형을 추가하기 때문에 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 문서에 명시된 대로 프리플라이트 요청(단순한 요청이 아님)을 생성하고 있습니다. 이것을 강제합니다.
따라서 이 모드에서는 기본 요청보다 OPTIONS 요청이 먼저 실행되므로 서버가 OPTIONS 요청을 관리할 수 있는지 확인해야 합니다.

편집: 내 CORS 필터에서 허용된 헤더에 권한 부여를 추가해야 했습니다.

@jffernandez

같은 문제가 있습니다. Auth 헤더를 생략하면 POST, OPTIONS를 반환하는 Options 요청을 받은 다음 Authorization 헤더(예상)가 없기 때문에 403을 반환하는 POST를 받습니다.

헤더를 추가하면 옵션 요청만 받고 POST를 수행하지 않습니다.

post("http://localhost:8080/foo", foo)

대

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

axios가 아닌 CORS 문제입니다. 제공된 링크 @jffernandez 를 살펴보거나 여기에서 유사한 문제를 찾으십시오.

네, CORS에 관한 것입니다. 그러나 나와 같은 경우 API 서버에서 인증된 Content-Type을 추가하는 것을 잊었을 것입니다.

AllowedHeaders : Content-Type 및 X-Requested-With
그리고 귀하의 경우 승인.

물론 OPTIONS 메서드도 허용하는 것을 잊지 마십시오.

axios({ method: 'POST', url: 'you http api here', headers: {autorizacion: localStorage.token}, data: { user: 'name' } })

또는 이 CORS 오류를 해결하려면 노드에 corsproxy 패키지를 설치할 수 있습니다. 이것은 교차 출처 오류에 도움이 될 것입니다. 아래 링크를 참조할 수 있습니다.

https://github.com/gr2m/CORS-프록시

````
로그인 = () => {
console.log('로그인 클릭')
데이터 = JSON.stringify({
비밀번호: this.state.password,
사용자 이름: this.state.email
})

axios.post('url', data, {
    headers: {
        'Content-Type': 'application/json',
    }
}
)

}
```

이 헤더를 추가하여 해결

   axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

이것이 내가 POST 요청을 포맷하는 방법입니다.

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

cors 오류를 해결하려면 이 명령을 실행하기만 하면 됩니다. npm i --save cors 다음 app.js 가져오기에서 다음과 같이 가져옵니다.

var cors = require('cors');
그런 다음 내 경우에는 동일한 파일에서 이와 같이 호출합니다. 루트 파일은 app.js입니다.
app.use(cors());

그것은 당신의 cors 문제를 해결할 것입니다

@mirzaumersaleem 나는 cors를 사용하지 않고 있지만 axios를 사용하여 백엔드에 게시하려고 하는데 400 Bad 요청을 받고 있습니다.

fetch는 cors로 할 수 있지만(백엔드에는 문제가 없음), axios에서는 때때로 실패했습니다.

cors 오류를 해결하려면 이 명령을 실행하기만 하면 됩니다. npm i --save cors 다음 app.js 가져오기에서 다음과 같이 가져옵니다.

var cors = require('cors');
그런 다음 내 경우에는 동일한 파일에서 이와 같이 호출합니다. 루트 파일은 app.js입니다.
app.use(cors());

그것은 당신의 cors 문제를 해결할 것입니다

내 여행에서 CORS는 서버(.net /java/node/php 등)에서 수행해야 합니다.

편집: 내 CORS 필터에서 허용된 헤더에 권한 부여를 추가해야 했습니다.

@jffernandez

같은 문제가 있습니다. Auth 헤더를 생략하면 POST, OPTIONS를 반환하는 Options 요청을 받은 다음 Authorization 헤더(예상)가 없기 때문에 403을 반환하는 POST를 받습니다.

헤더를 추가하면 옵션 요청만 받고 POST를 수행하지 않습니다.

post("http://localhost:8080/foo", foo)

대

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

빠른 대답은 url 뒤의 첫 번째 인수와 두 번째 인수가 종종 잘못 배치된다는 것입니다(즉, axios(url, data, config)). 따라서 구성 부분을 생략하거나 데이터와 구성을 전환하면 예기치 않은 결과를 얻을 수 있습니다. 일반적으로 localhost로 작업하는 것은 다음과 같아야 합니다. 전혀 문제없이.

일반적으로 가독성이 좋지 않다.

axios.request(구성)
axios.get(url[, 구성])
axios.delete(url[, 구성])
axios.head(url[, 구성])
axios.options(url[, 구성])
axios.post(url[, 데이터[, 구성]])
axios.put(url[, 데이터[, 구성]])
axios.patch(url[, 데이터[, 구성]])

모든 API가 일관적이며
1) URL을 첫 번째 매개변수로,
2) 두 번째 매개변수로 구성(선택 사항),
3) 데이터(선택사항)

그것이 사용자들이 기대하는 것이기 때문입니다. 그럼에도 불구하고 axios는 그 작은 API 결정에서 큰 문제를 만들어 거의 모든 사람들이 일생에 한 번 이상 거기에 갇히게 만들었습니다.

나를 위해 일하십시오 :

`
const 헤더 = {
'콘텐츠 유형': '응용 프로그램/json',
'권한 부여': 'JWT 페페게...'
}

axios.post(Helper.getUserAPI(), 데이터, {
헤더: 헤더
})
.then((응답) => {
보내다({
유형: FOUND_USER,
데이터: 응답.데이터[0]
})
})
.catch((오류) => {
보내다({
유형: ERROR_FINDING_USER
})
})
`

여기에서 jquery로 동일한 문제에 직면하면 요청은 성공하지만 axios가 있는 req를 보낼 때 cors 문제가 발생합니다.
내 부탁--

      .post('https://test.pi.com/j_spring_security_check', {

        withCredentials: true,
        crossorigin: true,
        headers: {
          common:{
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'WithCredentials': true,
            'Access-Control-Allow-Origin': '*'
        }
      },
        data: JSON.stringify({
          j_username: email,
          j_password: password
        }),

        // proxy: {
        //   '/j_spring_security_check/*': 'https://devtest.pvai.com/j_spring_security_check',
        // }
      })

이들은 서버의 응답 헤더이며 내 locahost 출처가 허용되며 내가 보내는 헤더와 메소드도 허용됩니다.

access-control-allow-credentials: true
access-control-allow-headers: Authorization, X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept
access-control-allow-methods: POST, GET, OPTIONS
access-control-allow-origin: http://localhost:5000
access-control-expose-headers: Authorization
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
date: Wed, 11 Dec 2019 04:53:25 GMT
expires: 0
location: /authFailure
pragma: no-cache
status: 302
strict-transport-security: max-age=31536000 ; includeSubDomains
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

이것이 내가 POST 요청을 포맷하는 방법입니다.

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

덕분에 하루를 구했습니다! 나를 위해 일했다