结合 Nodejs + React Native + Axios + CORS

Posted 2023-03-04

【中文标题】结合 Nodejs + React Native + Axios + CORS

【英文标题】：Combine Nodejs + React Native + Axios + CORS

【发布时间】：2018-06-06 08:21:46

【问题描述】：

我正在尝试使用 Axios 从前端（react-native）向我的 API（Node.JS）发出请求。但我对我得到的错误感到困惑。这是错误的打印堆栈跟踪：

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 对后端服务器的配置：

// 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 在服务器端工作。

这是我与 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);
        );

【问题讨论】：

您能分享一下您是如何使用 Axios 进行通话的吗？该错误看起来不像 CORS 错误。

我是 *** 的新手，不知道如何在评论中添加代码，但我更新了我的帖子，对此感到抱歉

【参考方案1】：

答案：

好的，经过几个小时的研究，我自己找到了答案。问题是我的服务器Node.js 正在我的PC 上运行，我正在手机上使用Expo 测试我的应用程序。我使用Axios 和url http://localhost:3001/login 从前端调用服务器。由于我的手机无法访问我的 PC 的本地主机，我不得不更改我的 PC 的 IP 地址的 URL，http://192.168.0.123:3001/login。

以下是获取您 PC 的 IP 地址的方法：Calling locally hosted server from Expo App

这是一个类似的问题：Axios (in React-native) not calling server in localhost

希望它可以帮助将来有类似错误的人。

【讨论】：

谢谢.. 拯救了我的一天：D