[解決済み] 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);
}
})
}
注:サーバーサイドから有効にしていますが、まだ動作していません。現在、サーバーサイドからコードを変更することはできず、私の仕事はクライアントサイドのみに限定されています。
解決するには?
クロスオリジンリクエストを有効にするのは、クライアントではなく、サーバーです。これを行うには、次のようにチェックします。 この素敵なページ 複数のプラットフォームに対応した実装と構成で
関連
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] バベルエラーです。JSX値は、式または引用されたJSXテキストのいずれかである必要があります。
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] Uncaught (in promise) Error: リクエストに失敗、ステータスコード404
-
[解決済み] react.jsで複数のモジュールをエクスポートする
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み】FirebaseのクラウドファンクションでCORSを有効にする
-
[解決済み】CORS(cross-origin resource sharing)投稿リクエストを動作させる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避するにはどうすればよいですか?
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] ReactJS で inst.render が関数でないエラーが発生する
-
[解決済み] XMLHttpRequestが読み込めない XXX 'Access-Control-Allow-Origin' ヘッダがない
-
[解決済み] nextjsで異なる.envファイルを使用するには?
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み】「アクセス制御-許可-オリジン」がない - Node / Apacheのポートの問題