問題タブ [axios]

次のような axios で API メソッドを呼び出しています。

両方の console.log が出力を出力します。

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

API はGET有効な json データを返しています。POSTMAN 経由で次のように確認しました。

私はついていきます ：

http://codeheaven.io/how-to-use-axios-as-your-http-client/

私は何が欠けていますか？

POSTユーザーのパスワードを更新するためにサーバーにリクエストを行うアクションがありますが、チェーンされた catch ブロックでエラーを処理できません。

エラーをログに記録すると、次のように表示されます。

ネットワークタブを確認するとレスポンスボディは見えるのですが、なぜか値にアクセスできません！

私は無意識のうちにどこかで間違いを犯しましたか？別のリクエストからの他のエラーをうまく処理しているためですが、これを解決できないようです。

ページを読み込んでいるときに、「Uncaught TypeError: Cannot read property 'data' of null」というエラーがコンソールに表示されます。コンストラクターで、redux-promise を使用して axios を使用してデータの外部 API を呼び出し、プロパティをステートレス コンポーネント (TranslationDetailBox) に渡します。データが到着し、子コンポーネントはすぐに props を受け取ります (ページは問題ないように見えます) が、最初にエラー メッセージが表示されます。

this.props.translation は API 呼び出しの前は空であり、状態が外部データで更新される前にレンダリングが行われます。これが問題だと思いますが、解決方法がわかりません。

私は Webpack が初めてで、React プロジェクトで axios を使用しています。npm経由でaxiosをインストールしてから、使用したいときに次のようにインポートしています：

import axios from 'axios/dist/axios.min.js';

残りは Webpack が処理します。これは「正しい」方法ですか？

非同期アクションにreact with reduxとaxiosを使用しています。バックエンド用のlaravel 5.2 API。React は実際のドメインにあり、API はサブドメインにあります。API に対して async get リクエストを呼び出そうとすると、ネットワークから 200 Ok を取得していますが、コンソールでエラーが発生しています。

コンソールログ:

XMLHttpRequest はhttp://api.doublecurlybraces.me/api/test?api_token=inpm38XbI9Fof7CZv99VlfNQTjx02EjaL5V1B3###########を読み込めません 。プリフライト要求への応答がアクセス制御チェックに合格しません: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン ' http://doublecurlybraces.me ' へのアクセスは許可されていません。

アクションコード

パラメータをaxios.postリクエストに入れる方法を理解するのに苦労していますか? これまでの私のアプリについて少し:

RethinkDB のインスタンスと通信している高速アプリがあります。別の React/Redux アプリもあります。アクションクリエーターでエクスプレスエンドポイントを正常にヒットaxios.getし、React コンポーネントでそのデータ (ユーザー) を表示できます。ただし、現在、エクスプレス アプリの別のルートにパラメーターを送信し、そのユーザーを rethinkdb データベースに保存しようとしています。当分の間、認証には関心がありません。エクスプレス側で正しくセットアップし、カールを介してエクスプレスアプリ内からダミーユーザーをDBに保存できますが、反応アプリ/反応フォームからのリクエストで必要なパラメーターを送信する方法がわかりません。以下の関連コードを見つけてください。

私のExpress App APIから、手動でヒットすると、テストユーザーがデータベースに正常に保存されます。

..そして以下は、別のアクションファイルのコードスニペットですReact and Redux App。正直なところ、それを書いてuserオブジェクトを含めるのが本当に難しいかどうかはわかりません。

どんな助けでも大歓迎です。

関数のラッパーがあるとしましょう。axiosこれはすべての ajax クエリに実装する必要があるため、コードを DRY に保ちたいと考えています。そのように：

.then問題は、リゾルバーをに追加してquery()も何も起こらないことです! そのように：

「./query.js」からクエリをインポート

.then()別の機能を追加するにはどうすればよいquery()ですか?

現在、locahost:3333 で reactjs サイトをテストしており、localhost:54690 で asp.net Web API 2 をテストしています。

ajax にaxiosを使用していますが、リクエストを行うとエラーが発生します。

XMLHttpRequest はhttp://localhost:54690/api/Storage/Getを読み込めません。プリフライト要求への応答がアクセス制御チェックに合格しません: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン「http://localhost:3333」へのアクセスは許可されていません。応答の HTTP ステータス コードは 500 でした。

Cors を追加しようとしましたが、正しく行っていないと思います。サーバーサイドとクライアントサイドを試してみました。

サーバ側

WebapiConfig.

編集

私がこれをするときのようです

[EnableCors(origins: " ", headers: " ", methods: "*")]

できます。私のajaxのヘッダーに何も入れる必要さえありません。私はこれが本番環境で発生することを望んでいないので、これは実際にはソウルションではありませんが、私は推測していますか?

また、cors をセットアップできるグローバル関数はありますか? すべてのコントローラーに配置するのはちょっと面倒です。

編集 2

@kormali_2 からのリンクを詳しく調べると、「http://locahost:3333/」があるはずの場所に「http://locahost:3333」があるため、問題が発生している可能性があることがわかります。使用できるグローバルオプションもあります.

Axios から Promise を返すにはどうすればよいですか? インターセプターを使用する必要があるかどうかわかりません。

私は今このコードを持っています

と

ここで、fetchStorage を ajax 経由で何かを行うように変更したいとします。

ここでそれを行う代わりに、どのように約束を返すのですか?

編集

なぜ私がこれをしているのかを明確にするために、私はこのようなものを持っています