私は本当に簡単な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');
}
);
};
};
しかし、これでもうまくいきませんでした。誰かが私を助けてくれることを願っています。他の同様の問題はそうではありませんでした。
ソリューションは別のソースから提供されましたが、同じ問題を探している他のユーザーを支援するためにここに投稿します。基本的に、アプリケーションをビルドするためにAndroid AVD(エミュレータ))を使用しましたが、実際にはエミュレータは別のマシンであるため、localhostを呼び出すことができませんでした。
問題を解決するには、次の方法でリクエストを送信する必要がありました。
https://10.0.2.2:3000/v1/test
の代わりに:
https://localhost:3000/v1/test
あなたが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
_は、仮想マシンからコンピューターへのローカルホストですが、動作しません。
エミュレーターは、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では完全に動作します!
ネイティブの問題に反応しない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
別の解決策は、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');
}
);
}; };
これで動作するはずです!
私のために働いたあなたのファイアウォールをオフにしてみてください