Axios(在React-native中)不在localhost中调用服务器

Question

我正在构建一个非常简单的api和react-native应用程序.服务器运行良好(使用PostMan测试)但应用程序不会调用服务器.当axios必须发送帖子请求时它会阻止(见下文).

我很绝望:-(在这里度过太多时间.请,如果你能帮助我...

这是我的代码LogIn页面.它派遣动作创建者(使用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之前的三个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');
      }
    );
  };
};

但即使这样也行不通.希望有人能帮助我.其他类似的问题没有.

Answer 1

该解决方案来自不同的来源,但我在此发布,以帮助其他人寻找相同的问题.基本上我使用Android AVD(模拟器)来构建应用程序.但是模拟器实际上是另一台机器,这就是它无法调用localhost的原因.

为解决这个问题,我不得不以下列方式发送请求:

https://10.0.2.2:3000/v1/test

代替:

https://localhost:3000/v1/test

Answer 2

您的模拟器是一个独立的设备，与您的网络浏览器、邮递员或服务器不在同一 IP（本地主机或 127.0.0.1）上运行。

为了从您的模拟器向您的服务器发出请求，您需要通过您的计算机 IP 地址访问您的服务器：在 Windows上，通过在命令提示符下运行ipconfig来获取您的 IP 地址

在 Unix 终端（Linux、Mac OS）上运行ifconfig以获取您的 IP 地址

你应该使用http://your_ip_address:port而不是http://localhost :port

我没有在 Linux、Mac OS 上测试过它，但它在 Windows 上运行得很好！

Answer 3

1. 从本地主机更改为您的ip

2. 添加http://

   http://192.168.43.49:3000/user/

Answer 4

如果您使用的是Mac，则此解决方案对我有用。我正在将React Native与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但是没有用。