React Native Axios请求本地Laravel Valet API遇证书无效错误

核心问题分析 #

iOS的App Transport Security（ATS）默认限制非HTTPS请求，而Laravel Valet的自签名HTTPS证书不会被iOS默认信任；即使切换到HTTP，ATS也会拦截未授权的域名请求，最终导致证书无效的错误提示。

具体解决方案 #

方案1：配置ATS允许HTTP请求（开发环境临时用） #

如果继续使用HTTP请求，需要在iOS项目的Info.plist中添加域名例外：

1. 打开Xcode，找到项目中的Info.plist文件，右键选择「Open As -> Source Code」
2. 添加以下XML配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>booking-api.valet</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

3. 保存后删除iOS构建文件夹，重启应用。

方案2：信任Valet的HTTPS证书（推荐，贴近生产环境） #

如果已经用valet secure booking-api启用HTTPS，需要让iOS信任自签名证书：

1. 在模拟器/设备中手动信任证书：
   • 打开Safari，访问https://booking-api.valet
   • 当提示证书不可信时，点击「查看证书」，选择「信任」选项
   • 重启React Native应用
2. Axios临时配置（开发环境）：
   如果仍有问题，可以在Axios实例中临时禁用证书验证（仅开发用，上线必须删除）：

   import axios from 'axios';
   import https from 'https';
   
   const apiClient = axios.create({
     baseURL: 'https://booking-api.valet',
     httpsAgent: new https.Agent({
       rejectUnauthorized: false
     })
   });
   
   // 登录方法改用这个实例
   login: (email, password) => {
     apiClient
       .post('/login', {
         email: email,
         password: password,
         device_name: 'iphone',
       })
       .then(response => {
         const userResponse = {
           email: response.data.user.email,
           token: response.data.token,
         };
         setUser(userResponse);
         AsyncStorage.setItem('user', JSON.stringify(userResponse));
       })
       .catch(error => {
         console.log(error.response);
         setErrors(JSON.stringify(error.response.data));
       });
   },
   

方案3：重置React Native与Valet环境 #

1. 清除React Native缓存：

   npx react-native start --reset-cache
   

2. 重建iOS项目：

   rm -rf ios/build
   cd ios && pod install && cd ..
   npx react-native run-ios
   

3. 重新配置Valet站点：

   valet unlink booking-api
   valet link booking-api
   valet secure booking-api # 如果用HTTPS
   

内容的提问来源于stack exchange，提问作者jacklove315