结合 Nodejs + React Native + Axios + CORS [英] Combine Nodejs + React Native + Axios + CORS
问题描述
我正在尝试使用 Axios 从前端 (react-native) 向我的 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_modulesaxioslibcorecreateError.js:16:24 in createError
- node_modulesaxioslibadaptersxhr.js:87:25 in handleError
- node_modulesevent-target-shimlibevent-target.js:172:43 in dispatchEvent
- node_modules
eact-nativeLibrariesNetworkXMLHttpRequest.js:554:29 in setReadyState
- node_modules
eact-nativeLibrariesNetworkXMLHttpRequest.js:387:25 in __didCompleteResponse
- node_modules
eact-nativeLibrariesvendoremitterEventEmitter.js:182:12 in emit
- node_modules
eact-nativeLibrariesBatchedBridgeMessageQueue.js:302:47 in __callFunction
- node_modules
eact-nativeLibrariesBatchedBridgeMessageQueue.js:116:26 in <unknown>
- node_modules
eact-nativeLibrariesBatchedBridgeMessageQueue.js:265:6 in __guard
- node_modules
eact-nativeLibrariesBatchedBridgeMessageQueue.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
调用服务器.由于我的手机无法访问我电脑的本地主机,我不得不更改我电脑 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 地址的方法:调用本地托管服务器来自世博会应用
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屋!