如何将React Native与Laravel REST API对接及请求报错问题排查

问题一：跨主机访问是否会引发问题 #

肯定会出现访问异常，核心原因有两点：

• 你填写的http://127.0.0.1:8000是开发电脑的本地回环地址，React Native运行在模拟器/真机上时，这个地址指向的是运行RN的设备本身，不是你的电脑，自然无法访问到Laravel服务
• 二者主机、端口均不相同，默认会触发同源策略限制，没有正确配置CORS的话请求会被直接拦截

对应解决方法：

1. 启动Laravel时绑定全网段地址，执行命令 php artisan serve --host 0.0.0.0 --port 8000，这样同一WiFi下的所有设备都可以通过你电脑的WiFi内网IP（通常是192.168.x.x格式，自行查看电脑的局域网地址）访问Laravel服务
2. 配置Laravel跨域：打开config/cors.php文件，修改配置：paths数组加入api/*匹配所有API接口，allowed_origins开发阶段可以填*允许所有来源请求，配置完成后执行php artisan config:clear清除配置缓存生效
3. 安卓端额外处理：安卓9及以上系统默认禁止明文HTTP请求，需要在安卓项目中新增网络安全配置，允许你的内网IP的HTTP访问，或者开发阶段临时开启明文请求权限

问题二：代码错误修正及数据获取方案 #

你现有代码存在以下几处错误：

• 请求地址错误，需要替换为你电脑的实际局域网IP
• 响应解析逻辑错误：Laravel接口返回的是JSON格式，用text()解析会拿到纯字符串，后续FlatList无法遍历数组，应该用json()解析
• 变量未定义：console.warn(ddata)中的ddata没有声明，实际应该是你定义的adata
• 没有异常捕获逻辑：fetch请求失败会直接抛出异常，没有捕获会导致程序崩溃

修正后代码如下：

import React from 'react';
import { View, Text, FlatList } from 'react-native'; // 必须引入所需基础组件

class App extends React.Component{
  constructor()
  {
    super();
    this.state={
      data :[]
    }
  }
  componentDidMount()
  {
    this.callApi();
  }
  async callApi()
  {
    try {
      // 把下面的IP替换成你电脑的实际WiFi局域网IP
      let res = await fetch('http://192.168.x.x:8000/api/users')
      // 用json()解析接口返回的JSON数据
      let adata = await res.json();
      this.setState({data: adata})
      console.warn(adata)
    } catch (e) {
      console.error('接口请求失败：', e)
    }
  }
  render(){
    console.warn("render",this.state.data)
    return(
      <View>
         <Text style={{fontSize:50}}>FlatList</Text>
         <FlatList 
        data={this.state.data}
        renderItem={({item})=><Text style={{fontSize:50}}>{item.name}</Text>}
        keyExtractor={(item, index) => index.toString()}
        />
      </View>
    )
  }
}

export default App;

内容的提问来源于stack exchange，提问作者raja ali haider