首页 文章

Axios（在React-native中）不在localhost中调用服务器

提问于
浏览 次
9

我正在构建一个非常简单的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');
      }
    );
  };
};

最后，我还尝试修改调用添加 Headers 如下，因为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.js react-native axios

4 回答

  • 0

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

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

    https://10.0.2.2:3000/v1/test

    代替：

    https://localhost:3000/v1/test
    回复于
  • 0

    我找到了axios的另一个解决方案 . 在反应本机问题时没有工作：

    问题： - 对象不可见和错误：未处理的承诺 . 网络错误解决方案： - 使用以下命令：

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

    而不是npm install --save axios，即使用-g .

    并检查您的模拟器是否具有互联网连接 .

    如果您的模拟器没有互联网连接并且显示错误，例如：DNS探测完成错误配置 . ，则停止ANDROID STUDIO仿真器并在终端中运行这两个命令

    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

    回复于
  • 16

    另一种解决方案是使用admin cmd中的这些命令在localhost计算机上创建托管网络：

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

    将您的设备连接到计算机的热点，然后运行以下命令获取计算机的IP：

    ipconfig

    现在获取IPV4地址并将其放在app的axios / fetch url上，

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

    }; };

    它现在应该工作！

    回复于
  • 1

    如果你正在使用mac，这个解决方案对我有用 . 我正在使用React Native和Android模拟器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 是从虚拟机到计算机的本地主机但没有工作 .

    回复于

相关问题