web-dev-qa-db-ja.com

CORSの問題があるAxios

Package.jsonにプロキシを追加し、うまく機能しましたが、npm実行ビルド後にCORSの問題が再び浮上し、Reactでnpm実行ビルド後にCORSの問題に対処する方法を誰もが知っています。

さまざまな方法を使用して、axiosリクエストにヘッダーを追加しようとしました。ただし、axiosリクエストに「Access-Control-Allow-Origin」： '*'を追加できませんでした。私のコードは次のとおりです：

package.json

  "proxy": {
      "*":{ "target" : "http://myurl"}
   }

GetData.js

  axios.defaults.baseURL = 'http://myurl';
  axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
  axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
  axios.get(serviceUrl, onSuccess, onFailure)
  .then(resp => { 
        let result = resp.data;
        onSuccess(result);
  })
  .catch(error => {
        if(onFailure) {
            return onFailure(error);
        }
  })
 }

注：サーバー側から有効にしましたが、まだ機能していません。現在、サーバー側からコードを変更することはできません。私の作業はクライアント側のみに制限されています。

reactjsproxycorsaxios
12
Kiran

サーバーでは、クライアントではなくクロスオリジンリクエストを有効にする必要があります。これを行うには、複数のプラットフォームの実装と構成で この素敵なページ を確認できます

14
Murilo Cruz

私は同じ問題に遭遇しました。コンテンツタイプを変更すると解決しました。この解決策があなたに役立つかどうかはわかりませんが、多分そうでしょう。コンテンツタイプを気にしない場合、それは私のために働いた。

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