web-dev-qa-db-ja.com

Axios（React-native）がlocalhostのサーバーを呼び出していない

私は本当に簡単なAPIと反応ネイティブのアプリケーションを構築しています。サーバーは正常に動作します（PostManでテスト済み）が、アプリケーションはサーバーを呼び出しません。 axiosが投稿リクエストを送信する必要がある場合にブロックします（以下を参照）。

私は必死です:-(その中にあまりにもドロドロの時間を失います。助けてください。

ここに私のコードのログインページがあります。メールとパスワードを提供するアクション作成者（reduxを使用）をディスパッチします。

...
const LogIn = React.createClass({
  submitLogin() {
    // log in the server
    if (this.props.email !== '' && this.props.psw !== '') {
      if (this.props.valid === true) {
        this.props.dispatch(logIn(this.props.email, this.props.psw));
      } else {
        this.props.dispatch(errorTyping());
      }
    }
  },
...

電子メールとパスワードが取得され、アクション作成者に送信されます。

import axios from 'axios';
import { SIGNIN_URL, SIGNUP_URL } from '../api';
// import { addAlert } from './alerts';
exports.logIn = (email, password) => {
  return function (dispatch) {    
    console.log(email);
    console.log(password);
    console.log(SIGNIN_URL);
    return axios.post(SIGNIN_URL, { email, password })
    .then(
      (response) => {
        console.log(response);
        const { token, userId } = response.data;
        dispatch(authUser(userId));
      }
    )
    .catch(
      (error) => {
        console.log('Could not log in');
      }
    );
  };
};
const authUser = (userId) => {
 return {
 type: 'AUTH_USER',
 userId
 };
};
...

Axiosの前の3つのconsole.log（）は、正しい方法でデータを表示します。 SIGNIN_URLは、郵便配達員で使用しているものとまったく同じです。 ...しかし、axiosは呼び出しません。

すべてのカードを渡すために、これは私の店です：

import thunk from 'redux-thunk';
import { createStore, compose, applyMiddleware } from 'redux';
import { AsyncStorage } from 'react-native';
import { persistStore, autoRehydrate } from 'redux-persist';
import reducer from '../reducer';
const defaultState = {};
exports.configureStore = (initialState = defaultState) => {
 const store = createStore(reducer, initialState, compose(
 applyMiddleware(thunk),
 autoRehydrate()
 ));
 persistStore(store, { storage: AsyncStorage });
 return store;
};

デバッガーにはエラーメッセージはありません（ただし、axios呼び出しで指定されたもの（「ログインできませんでした」）

私はWindows 10を使用しています：

"axios": "^0.15.3",
"react": "15.4.2",
"react-native": "0.38.0",
"redux": "^3.6.0"

単純なGET呼び出しを準備し、サーバーが単純なメッセージを返すことになっている場合でも、呼び出しは失敗します（郵便配達員とブラウザーでテスト済み）：

exports.test = () => {
  return function () {
    return axios.get('https://localhost:3000/v1/test')
    .then(
      (response) => {
        console.log(response);
      }
    )
    .catch(
      (error) => {
        console.log('error');
      }
    );
  };
};

最後に、APIがjsonを受け入れるようにコーディングされているため、次のようにヘッダーを追加して呼び出しを変更しようとしました。

const head = {
  headers: { 'Content-Type': 'application/json' }
};

exports.test = () => {
  return function () {
    return axios.get('https://api.github.com/users/massimopibiri', head)
    .then(
      (response) => {
        console.log(response);
      }
    )
    .catch(
      (error) => {
        console.log('error');
      }
    );
  };
};

しかし、これでもうまくいきませんでした。誰かが私を助けてくれることを願っています。他の同様の問題はそうではありませんでした。

node.jsreact-nativeaxios
11
Pibo

ソリューションは別のソースから提供されましたが、同じ問題を探している他のユーザーを支援するためにここに投稿します。基本的に、アプリケーションをビルドするためにAndroid AVD（エミュレータ））を使用しましたが、実際にはエミュレータは別のマシンであるため、localhostを呼び出すことができませんでした。

問題を解決するには、次の方法でリクエストを送信する必要がありました。

https://10.0.2.2:3000/v1/test

の代わりに：

https://localhost:3000/v1/test
23
Pibo

あなたがMacを使用している場合、このソリューションは私のために働いた。 React Native with Android Simulator ADV。Nexus Api 27

_            axios.get('http://192.168.1.21:8686/api/v1/test')
            .then(response => console.log(response))
            .catch(err => console.log(err));
_

ここで、ip _192.168.1.21_は_system preferences > Network > Advanced > TCP/IP > IPv4 Address_からのものです

また、axios.get('http://10.0.2.2:8686/bec/api/v1/test')をテストしました。ここで_10.0.2.2_は、仮想マシンからコンピューターへのローカルホストですが、動作しません。

5
roll

エミュレーターは、Webブラウザー、郵便配達員、またはサーバーと同じIP（localhostまたは127.0.0.1）で実行されていない独自のデバイスです。

エミュレータからサーバーにリクエストを行うには、コンピューターのIPアドレスを介してサーバーにアクセスする必要があります：Windowsでは、ipconfigを実行してIPアドレスを取得しますコマンドプロンプトで

Unixターミナル（Linux、Mac OS）でifconfigを実行してIPアドレスを取得します

http：// localhost：portの代わりに、http：// your_ip_address：port

Linux、Mac OSではテストしませんでしたが、Windowsでは完全に動作します！

2
Peter Moses

ネイティブの問題に反応しないaxios.getの別のソリューションが見つかりました。

問題：-オブジェクトが表示されず、エラー：未処理のプロミス。ネットワークエラー解決策：-以下のコマンドを使用します：

= >>> npm install -g --save axios

npm install --axiosの代わりに-gを使用します。

また、エミュレータがインターネットに接続しているかどうかも確認してください。

エミュレーターにインターネット接続がなく、次のようなエラーが表示されている場合：DNS probe finished bad config。、then STOP Android STUDIO Emulator and run these two commands in terminal

1。>> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -list-avds​

私の出力：

  • Pixel_XL_API_27

このステップの後、avdsの名前を取得します。

例：-Pixel_XL_API_27

以下のコマンドを実行してください：-

2。>> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -avd Pixel_XL_API_27 -dns-server 8.8.8.8​

1
Akshay Vyas

別の解決策は、admin cmdからの次のコマンドを使用して、localhostコンピューターにホストされたネットワークを作成することです。

netsh wlan set hostednetwork mode=allow ssid=wifi_name key=wifi_password
netsh wlan start hostednetwork

デバイスをコンピューターのホットスポットに接続し、次を実行してコンピューターのIPを取得します。

ipconfig

次に、IPV4アドレスを取得して、アプリのaxios/fetch URLに配置し、

axios.get('https://192.168.137.1:3000/api')
.then(
  (response) => {
    console.log(response);
  }
)
.catch(
  (error) => {
    console.log('error');
  }
);

}; };

これで動作するはずです！

0
Waweru wa Kamau

私のために働いたあなたのファイアウォールをオフにしてみてください

0
user11581745