1. ホーム
  2. reactjs

[解決済み] AxiosにCORSの問題が発生

2022-03-02 15:05:33

質問

パッケージ.jsonにプロキシを追加してうまくいったのですが、npm run build後にCORS問題が再浮上してしまいました、Reactでnpm run build後のCORS問題に対処する方法を知っている人はいますか?

axiosのリクエストにヘッダを追加する方法をいろいろと試してみました。しかし、私はaxiosのリクエストで'Access-Control-Allow-Origin':'*'を追加することに失敗しました。私のコードは次のとおりです。

パッケージ.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);
        }
  })
 }

注:サーバーサイドから有効にしていますが、まだ動作していません。現在、サーバーサイドからコードを変更することはできず、私の仕事はクライアントサイドのみに限定されています。

解決するには?

クロスオリジンリクエストを有効にするのは、クライアントではなく、サーバーです。これを行うには、次のようにチェックします。 この素敵なページ 複数のプラットフォームに対応した実装と構成で