Axios(在React-native中)不在本地主机中调用服务器 [英] Axios (in React-native) not calling server in localhost
问题描述
我正在构建一个非常简单的api和react-native应用程序.该服务器运行良好(已通过PostMan测试),但该应用程序未调用该服务器.它会在axios必须发送发帖请求时阻止(见下文).
I'm building a really easy api and react-native application. The server works well (tested with PostMan) but the application doesn't call the server. It blocks when axios has to send the post request (see below).
我很绝望:-(忙得不可开交.请,如果您能帮助我...
I'm desperate :-( Loosing too mush time in it. Please, if you can help me...
这是我的代码登录"页面.它分派动作创建者(与redux一起使用)并提供电子邮件和密码:
Here is my code LogIn page. It dispatch the action creator (working with redux) giving email and password:
...
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());
}
}
},
...
电子邮件和密码被检索并发送给动作创建者:
email and password are weel retrieved and sent to the action creator:
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之前的三个console.log()以正确的方式显示数据. SIGNIN_URL与邮递员中使用的完全相同. ...但是axios不会打电话.
The three console.log() before axios show the data in the correct way. SIGNIN_URL is exactly the same I use in postman. ...but axios doesn't call.
只要给所有卡片,这是我的商店:
Just to give all the cards, this is my store:
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调用给出了错误消息(无法登录")
There's no error message in the debugger (but the one given by the axios call ('Could not log in')
我在Windows 10上,具有:
I'm on windows 10, with:
"axios": "^0.15.3",
"react": "15.4.2",
"react-native": "0.38.0",
"redux": "^3.6.0"
即使我准备了一个简单的GET调用,并且服务器应该返回一条简单的消息(经过邮递员和浏览器测试),该调用也会失败:
The call fails even when I prepare a simple GET call and the server is supposed to give back a simple message (tested with postman and browser):
exports.test = () => {
return function () {
return axios.get('https://localhost:3000/v1/test')
.then(
(response) => {
console.log(response);
}
)
.catch(
(error) => {
console.log('error');
}
);
};
};
最后,由于api编码为接受json,因此我还尝试了如下修改以添加标头的调用:
Last, I tryed also to modify the call adding a header as the following, because the api is coded to accept 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');
}
);
};
};
但是即使这样也没有用.希望有人可以帮助我.其他类似问题没有.
but even this didn't work. hope somebody can help me. Other similar issues didn't.
推荐答案
该解决方案来自其他来源,但我将其发布在此处,以帮助其他人寻找相同的问题.基本上,我使用Android AVD(仿真器)来构建应用程序.但是仿真器实际上是另一台机器,这就是为什么它不能调用本地主机的原因.
The solution came from a different source, but I post it here to help others looking for the same issue. Basically I used Android AVD (emulator) to build the application. But the emulator is in fact another machine, and that's why it couldn't call the localhost.
要解决此问题,我必须通过以下方式发送请求:
To solve the probleme, I had to send the request in the following way:
https://10.0.2.2:3000/v1/test
代替:
https://localhost:3000/v1/test
这篇关于Axios(在React-native中)不在本地主机中调用服务器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!