React Native上传图片至Laravel API报403错误，Postman可正常运行

我正在开发一个Laravel后端用于存储费用记录，包含图片上传功能。该后端通过Postman测试完全正常，但从React Native应用上传图片时，会出现403 Forbidden错误。

后端代码 #

public function store(Request $request)
{
    try {
        $store_expence = new AddExpence;
        $store_expence->total_milage = $request->meter;
        $store_expence->amount = $request->amount;
        $store_expence->asset_id = $request->asset_id;
        $store_expence->type_id = $request->type_id;
        $store_expence->pump_station = $request->pump_station;
        $store_expence->user_id = Auth::guard('api')->user()->id;

        if($request->file('file')) {
            $image = $request->file('file');
            $imageName = time() . '.' . $image->getClientOriginalExtension();

            // Resize the image
            $image_resize = Image::make($image->getRealPath());
            $image_resize->resize(1000, 1000);

            // Save the image
            $path = 'uploads/' . $imageName;
            $image_resize->save(public_path($path));
            
            // Store path in database
            $store_expence->image = $path;
        }
        
        if ($store_expence->save()) {
            return response()->json(['result' => 'Data is stored successfully'], 200);
        } else {
            return response()->json(['message' => 'There is an error in uploading'], 400);
        }
    } catch (\Exception $e) {
        \Log::error('Image upload failed:', ['error' => $e->getMessage()]);
        return response()->json(['message' => 'Image upload failed: ' . $e->getMessage()], 400);
    }
}

React Native代码 #

const handleSave = async () => {
    try {
      setLoading(true);
      const token = await AsyncStorage.getItem("token");
  
      if (!pumpStation || !amount || type === "Type" || asset === "Asset") {
        alert("Please fill in all required fields.");
        setLoading(false);
        return;
      }
  
      const formData = new FormData();
      formData.append("meter", totalMilage);
      formData.append("pump_station", pumpStation);
      formData.append("amount", amount);
      formData.append(
        "type_id",
        data.type.find((item) => item.title === type)?.id || ""
      );
      formData.append(
        "asset_id",
        Object.keys(data.assets).find((key) => data.assets[key] === asset) || ""
      );
  
      if (image) {
        let localUri = image.startsWith("file://") ? image : `file://${image}`;
        let filename = localUri.split("/").pop();
        let match = /\.(\w+)$/.exec(filename);
        let type = match ? `image/${match[1]}` : "image/jpeg"; 
  
        formData.append("file", {
          uri: localUri, 
          name: filename,
          type: type,
        });
  
        console.log("Image being sent:", { uri: localUri, name: filename, type });
      }
  
      console.log("Full form data:", [...formData.entries()]);
  
      const response = await fetch(`${BASE_URL}/api/v1/expenses/storeExpenses`, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
          "Content-Type": "multipart/form-data",
        },
        body: formData,
      });
  
      const textResponse = await response.text();
      console.log("Server response:", textResponse);
  
      if (response.ok) {
        showAlert("Success", "Expense saved successfully", true);
      } else {
        showAlert("Error", textResponse);
      }
    } catch (error) {
      console.error("Error saving expense:", error);
      showAlert("Error", error.message);
    } finally {
      setLoading(false);
    }
  };

问题现象 #

API在Postman中测试运行正常，但从React Native应用发起相同请求时，会返回403 Forbidden错误。

已尝试的解决措施 #

• 确保请求头中已正确发送API token；
• 确认React Native应用有权限访问图片，且FormData已正确构造；
• 对比React Native与Postman请求的Authorization头，二者完全一致。

恳请各位提供解决思路或相关见解！

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