组合Nodejs + React Native + Axios + CORS

将Node.js、React Native、Axios和CORS结合起来，可以实现一个强大的前后端分离的应用程序。以下是一个简单的示例，展示了如何设置这些技术栈。

后端（Node.js + Express）

1. 安装必要的依赖： npm init -y npm install express cors body-parser
2. 创建一个简单的Express服务器： // server.js const express = require('express'); const cors = require('cors'); const bodyParser = require('body-parser'); const app = express(); const port = 3000; // 使用CORS中间件 app.use(cors()); // 解析JSON请求体 app.use(bodyParser.json()); // 简单的GET路由 app.get('/api/data', (req, res) => { res.json({ message: 'Hello from the server!' }); }); // 启动服务器 app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); });

前端（React Native + Axios）

1. 创建一个新的React Native项目： npx react-native init MyReactNativeApp cd MyReactNativeApp
2. 安装Axios： npm install axios
3. 创建一个简单的组件来调用后端API： // App.js import React, { useEffect, useState } from 'react'; import { View, Text, Button } from 'react-native'; import axios from 'axios'; const App = () => { const [data, setData] = useState(null); const fetchData = async () => { try { const response = await axios.get('http://localhost:3000/api/data'); setData(response.data); } catch (error) { console.error(error); } }; return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button title="Fetch Data" onPress={fetchData} /> {data && <Text>{data.message}</Text>} </View> ); }; export default App;

运行项目

1. 启动后端服务器： node server.js
2. 启动React Native开发服务器： npx react-native start
3. 在模拟器或真实设备上运行React Native应用： npx react-native run-android # 或者 npx react-native run-ios

注意事项

• CORS配置：确保后端的CORS配置允许来自React Native应用的请求。默认情况下，cors中间件允许所有来源的请求，但在生产环境中，你应该明确指定允许的来源。
• 网络权限：确保在AndroidManifest.xml中添加了网络权限： <uses-permission android:name="android.permission.INTERNET" />
• 开发环境：在开发过程中，React Native应用通常运行在不同的端口上（例如8081），而Node.js服务器运行在3000端口。确保你的设备或模拟器可以访问这些端口。