php $_post が axios を受け入れられない場合はどうすればよいですか?

フロントエンドとバックエンドの分離の人気に伴い、ますます多くの開発者が Vue や React などのフロントエンド フレームワークを使用し、フロントエンドがバックエンドにリクエストを送信するためのツールとして axios を使用しています。終わり。ただし、フロントエンドで使用する axios 設定方法に関連して、axios を使用して POST リクエストを送信すると、バックエンドがデータを正しく受信できないという状況が発生することがあります。

この記事では、考えられる状況を紹介します。axios を使用して POST リクエストを送信すると、バックエンドがデータを正しく受信できないということです。同時に、読者が同様の状況にうまく対処できるように設計された解決策である回避策も提供します。

問題の説明
Vue axios を使用してプロジェクトを開発する場合、通常は axios.post() を使用して POST リクエストを送信します。この POST リクエストには、送信する必要があるデータが含まれています。 。具体的なコード例は次のとおりです。

axios.post('/api/submit', {
    name: '张三',
    age: 25
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

バックエンドでは、$_POST を使用して、このリクエストで運ばれるデータを受信します。例は次のとおりです。

$name = $_POST['name'];
$age = $_POST['age'];

ただし、POST リクエストを送信すると、バックエンドはデータを正しく受信できません。

問題の原因
この問題の理由は、axios が POST リクエストの送信時にデフォルトで application/json 形式を使用してデータを転送するのに対し、バックエンドは ## を使用するためです。 #$_POSTデータを受信する場合、データを正しく受信するには、application/x-www-form-urlencoded 形式でデータを渡す必要があります。データ形式が異なる場合、バックエンドはデータを正しく解析できません。

解決策

この問題を解決するには、axios がリクエストを送信するときのデフォルトのリクエスト ヘッダーを
application/x-www-form-urlencoded になるように変更する必要があります。具体的な方法は次のとおりです。

axios リクエスト インターセプターに設定を追加し、リクエスト ヘッダーの Content-Type を application/x-www-form-urlencoded に設定します。

1. axios.interceptors.request.use(config => {
       if (config.method === 'post') {
           config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
       }
       return config;
   });

axios.post() メソッドのデータ パラメーターを URL エンコードします。

2. axios.post('/api/submit', qs.stringify({
       name: '张三',
       age: 25
   }))
   .then(function (response) {
       console.log(response);
   })
   .catch(function (error) {
       console.log(error);
   });

変更されたコード例は次のとおりです。

axios.interceptors.request.use(config => {
    if (config.method === 'post') {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
    return config;
});

axios.post('/api/submit', qs.stringify({
    name: '张三',
    age: 25
}))
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

上記の操作の後、POST リクエストをバックエンドに正しく送信し、データを正常に受信できます。

概要

axios を使用して POST リクエストを送信すると、バックエンドはデータを正しく受信できません。これは通常、axios がデフォルトで
application/json 形式を使用してデータを転送するためです。リクエストを送信し、バックエンドが $_POST を使用してデータを受信する場合、データを正しく解析するには、データを application/x-www-form-urlencoded 形式で渡す必要があります。 。この問題を解決するには、axios リクエスト インターセプターを設定し、リクエスト ヘッダーの Content-Type を application/x-www-form-urlencoded に設定し、axios.post() を設定する必要があります。メソッド のデータパラメータは URL エンコードされています。

以上がphp $_post が axios を受け入れられない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。