api 请求在 react-native 中不起作用

Posted 2023-05-07

【中文标题】api 请求在 react-native 中不起作用

【英文标题】：api request does not work in react-native

【发布时间】：2021-08-12 02:15:08

【问题描述】：

我正在使用 react-native

当我虚拟运行模拟器时，后端路由器很好地请求了 api。

但是，当我在我的 android 设备上实际测试它时，api 请求并没有到达后端。

我的前端端口号是 8081，后端是 3065。

这是我的代码

比如我的ip地址：49.174.243.53

(front.js)

    const Kakao = (navigation) => 
      const hello = async () => 
        const data = await axios.post('http://43.164.243.53:3065/kakao/test', 
          hi: 'hi2',
        );
      ;
      return (
        <LoginButton style=marginTop: 30 onPress=hello>
          <Label>hello</Label>
        </LoginButton>
      );
    ;

    export default Kakao;

(返回/app.js)

    const express = require('express');
    const dotenv = require('dotenv');
    const morgan = require('morgan');
    const path = require('path');
    const kakaoRouter = require('./routes/kakao');
    const db = require('./models');

    dotenv.config();
    const app = express();
    db.sequelize
      .sync()
      .then(() => 
        console.log('db 연결 성공');
      )
      .catch(console.error);
    passportConfig();

    app.use(morgan('dev'));
    app.use('/', express.static(path.join(__dirname, 'uploads')));
    app.use(express.json());
    app.use(express.urlencoded(extended: true));

    app.get('/', (req, res) => 
      res.send('hello express');
    );

    app.use('/kakao', kakaoRouter);

    app.listen(3065, () => 
      console.log('서버 실행 중!');
    );

（后退/路由器）

    router.post('/test', async (req, res, next) => 
      //whic is  kakao/test
      try 
        console.log('req.body:::::::::', req.body);
        return res.status(200).json(
          posts: 'h!!!!!!!!!!!!!!!!!',
        );
       catch (error) 
        next(error); // status 500
      
    );

【问题讨论】：

尝试启用 CORS 或使用 localhost 代替 IP

@folan 我累了，但它不起作用......

这几乎总是网络配置。服务器在你的电脑上？确保您的网络防火墙允许传入该 IP 和端口的连接。并确保您使用的是 wifi 而不是蜂窝网络（除非您想让该 IP 向全世界开放）。它可以在模拟器上运行，因为在模拟器和主机之间有一个专用网络可以启用任何网络。

【参考方案1】：

为了从 HTTP URL 查看远程文档，需要明文网络流量支持。在 Android 9.0（API 级别 28）或更高版本上，默认禁用明文支持，针对 Android 9.0 或更高版本的应用需要在 AndroidManifest 中添加 android:usesClearTextTraffic="true" 标志.xml 文件。

如果您只使用 HTTPS 文件，则不需要此标志