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)

vs

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

これはCORSの問題であり、axiosではありません。 提供されているリンク@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-Proxy

`` `` ``
サインイン=（）=> {
console.log（ 'ログインがクリックされました'）
data = 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の不正なリクエストが発生します

フェッチは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)

vs

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

簡単な答えは、urlの後の最初の引数と2番目の引数が間違って配置されることが多いということです。つまり、axios（url、data、config）です。したがって、config部分または切り替えられたデータとconfigを省略すると、予期しない結果が生じる可能性があります。一般に、localhostでの作業は次のようになります。何の問題もありません。

一般的に、それはあまり読みにくいです

axios.request（config）
axios.get（url [、config]）
axios.delete（url [、config]）
axios.head（url [、config]）
axios.options（url [、config]）
axios.post（url [、data [、config]]）
axios.put（url [、data [、config]]）
axios.patch（url [、data [、config]]）

私はすべてのAPIが一貫していることを期待し、
1）最初のパラメータとしてのURL、
2）2番目のパラメーターとして構成（オプション）、
3）データ（オプション）

それにもかかわらず、axiosはその小さな小さなAPIの決定から大きな問題を引き起こしたため、ほとんどの人が一生に少なくとも1回はそこに閉じ込められました。

私のために壊れた：

`
constヘッダー= {
'Content-Type'： 'application / json'、
'承認'： 'JWT fefege ...'
}

axios.post（Helper.getUserAPI（）、data、{
ヘッダー：ヘッダー
}）
.then（（response）=> {
急送（{
タイプ：FOUND_USER、
データ：response.data [0]
}）
}）
.catch（（error）=> {
急送（{
タイプ：ERROR_FINDING_USER
}）
}）
`

ここでjqueryで同じ問題に直面すると、リクエストは成功しますが、axiosでリクエストを送信すると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);
    })

ありがとう、私の日を救った！ 私のために働いた