结合Nodejs + React Native + Axios + CORS [英] Combine Nodejs + React Native + Axios + CORS

问题描述

我正在尝试使用Axios从前端(本机)向我的API(Node.JS)发出请求.但是我对我得到的错误感到困惑.这是错误的打印堆栈跟踪:

I am trying to make a request to my API (Node.JS) from the front-end (react-native) using Axios. But I am confused about the error I get. Here's the print stack trace of the error :

Network Error
- node_modules\axios\lib\core\createError.js:16:24 in createError
- node_modules\axios\lib\adapters\xhr.js:87:25 in handleError
- node_modules\event-target-shim\lib\event-target.js:172:43 in dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:554:29 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:387:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:182:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:302:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116:26 in <unknown>
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:265:6 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115:17 in callFunctionReturnFlushedQueue

因此，我不确定是否需要使用Axios配置某些内容以允许与后端进行通信，还是必须配置后端以允许与前端进行请求.这是我使用CORS后端服务器的配置:

So I am not sure if I need to configure something with Axios to allow the communication with the back-end or do I have to configure my back-end to allow the requests with the front-end. Here's my configuration of the server of the back-end with CORS :

// server.js
var app = require('./app');

var routes = require('./routes');
var port = process.env.PORT || 3001;
var cors = require('cors');

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

var server = app.listen(port, function(){
    console.log('Express server listening on port ' + port);
});

一切正常，我的GET和POST方法在服务器端工作.

Everything else works fine, my methods GET and POST works on the server side.

这是我与Axios的通话:

Here's my call with Axios :

import axios from 'axios';

export function loginUser(parameters, onSuccess, onError) {
    axios.post('http://localhost:3001/login', parameters)
    // Succes :
        .then((response) => {
            console.log(response);
        })
        // Echec :
        .catch((error) => {
            console.log(error);
        });
}

推荐答案

ANSWER:

好的，在处理了该错误几个小时之后，我自己找到了答案.问题是我的服务器Node.js正在我的PC上运行，而我正在用手机上的Expo测试我的应用程序.我从前端使用Axios和url http://localhost:3001/login调用服务器.由于无法用手机访问PC的本地主机，因此必须更改PC IP地址的URL，http://192.168.0.123:3001/login.

Alright, after few hours working on that bug, I found the answer by my self. The thing is that my server Node.js is running on my PC and I am testing my app with Expo on my cellphone. I was calling the server from the front-end with Axios with url http://localhost:3001/login. As I can't reach localhost of my PC with my cellphone, I had to change the url for the IP address of my PC, http://192.168.0.123:3001/login.

以下是获取您PC的IP地址的方法:呼叫本地托管服务器来自Expo App

Here's how to get your IP address of your PC : Calling locally hosted server from Expo App

这是一个类似的问题: Axios(在React-native中) )不在本地主机中调用服务器

Here's a similar problem : Axios (in React-native) not calling server in localhost

希望它将来可以解决类似的错误.

Hope it can help someone in the future with a similar bug.

这篇关于结合Nodejs + React Native + Axios + CORS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！