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

我绝望了:-(在里面浪费了太多时间.请,如果你能帮我的话...

这是我的代码登录页面.它向动作创建者(与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之前的log()以正确的方式显示数据.SIGNIN_URL与我在postman中使用的完全相同...但axios不打电话.

这是我的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调用('无法登录')给出的错误消息)

我在windows 10上,有:

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

即使我准备了一个简单的GET呼叫,并且服务器应该返回一条简单的消息(通过postman 和浏览器测试),呼叫也会失败:

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

最后,我还try 修改了添加标题的调用,如下所示,因为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');
      }
    );
  };
};

但即使这样也没用.希望有人能帮我.其他类似的问题则没有.

推荐答案

这个解决方案来自不同的来源,但我在这里发布它是为了帮助其他人寻找同样的问题.基本上,我使用安卓AVD(emulator)来构建应用程序.但是模拟器实际上是另一台机器,这就是为什么它不能调用localhost.

为了解决这个问题,我必须用以下方式发送请求:

https://10.0.2.2:3000/v1/test

而不是:

https://localhost:3000/v1/test

React-native相关问答推荐

PubNubReact无法工作,因为它已被废弃

复活的夹子在Panguesture上崩溃

如何渲染一个 svg 以在不同的窗口大小下动态地看起来相同?

在 React Native 中打开后日期 Select 器不关闭

是否有用于react-native 的简单同步存储选项?

变量 window在react-native 中代表什么?

给定 APK 文件,我如何检测应用程序是否使用 React Native?

fetch API 总是返回 {"_U": 0, "_V": 0, "_W": null, "_X": null}

在 react-native 元素中更改 android 和 ios 的入口文件路径

react-native 从右到左

Realm 和 React Native - 实现自动更新的最佳实践?

如何在 ubuntu 上安装 facebook watchman?

Ipad 上的 React Native - 错误 - could not connect to development server

在 React Native Navigator 中的组件之间传递值

React-Native:更改 ImageBackground 的不透明度 colored颜色

Tools > Android 菜单在 Android Studio 中不存在

React Native:如何将文件拆分为多个文件并导入它们?

以编程方式读取 app.json(或 exp.json)

xcode 使用错误的 node.js 版本

React Native 中的 CSS 三角形