Flutter调用Laravel API实现CRUD及解决CORS报错问题咨询

一、先解决CORS错误 #

CORS错误完全是Laravel API的跨域配置问题，和Flutter代码无关。Laravel有两种常用解决方式：

方式1：使用laravel-cors包 #

1. 安装包：

composer require fruitcake/laravel-cors

2. 发布配置文件：

php artisan vendor:publish --tag="cors"

3. 修改config/cors.php（开发环境可宽松配置，生产环境按需收紧）：

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'], // 生产环境替换为你的Flutter应用域名/IP
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

4. 在app/Http/Kernel.php的$middleware数组中注册中间件：

protected $middleware = [
    // ...其他中间件
    \Fruitcake\Cors\HandleCors::class,
];

方式2：手动编写CORS中间件 #

不想用第三方包的话，自己实现中间件：

1. 创建中间件：

php artisan make:middleware Cors

2. 在app/Http/Middleware/Cors.php中添加跨域逻辑：

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}

3. 同样在app/Http/Kernel.php的$middleware中注册该中间件。

二、Flutter端实现Get/Post请求 #

先在Flutter项目的pubspec.yaml中添加http依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

1. Get请求（获取数据） #

示例：从Laravel API拉取用户列表

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<dynamic>> fetchUsers() async {
  final response = await http.get(Uri.parse('http://你的LaravelAPI地址/api/users'));

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('加载用户列表失败');
  }
}

对应Laravel路由（routes/api.php）：

Route::get('/users', [UserController::class, 'index']);

Laravel控制器方法：

public function index()
{
    return response()->json(User::all());
}

2. Post请求（提交数据） #

示例：向Laravel API创建新用户

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<dynamic> createUser(String name, String email) async {
  final response = await http.post(
    Uri.parse('http://你的LaravelAPI地址/api/users'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'name': name,
      'email': email,
      'password': '123456', // 示例密码，实际项目需做加密处理
    }),
  );

  if (response.statusCode == 201) {
    return jsonDecode(response.body);
  } else {
    throw Exception('创建用户失败');
  }
}

对应Laravel路由：

Route::post('/users', [UserController::class, 'store']);

Laravel控制器方法：

use Illuminate\Support\Facades\Hash;

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|min:8',
    ]);

    $user = User::create([
        'name' => $validated['name'],
        'email' => $validated['email'],
        'password' => Hash::make($validated['password']),
    ]);

    return response()->json($user, 201);
}

三、扩展实现完整CRUD #

1. Put请求（更新数据） #

Flutter代码：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<dynamic> updateUser(int id, String name, String email) async {
  final response = await http.put(
    Uri.parse('http://你的LaravelAPI地址/api/users/$id'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'name': name,
      'email': email,
    }),
  );

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('更新用户信息失败');
  }
}

Laravel路由：

Route::put('/users/{user}', [UserController::class, 'update']);

控制器方法：

public function update(Request $request, User $user)
{
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users,email,'.$user->id,
    ]);

    $user->update($validated);

    return response()->json($user);
}

2. Delete请求（删除数据） #

Flutter代码：

import 'package:http/http.dart' as http;

Future<void> deleteUser(int id) async {
  final response = await http.delete(
    Uri.parse('http://你的LaravelAPI地址/api/users/$id'),
  );

  if (response.statusCode != 204) {
    throw Exception('删除用户失败');
  }
}

Laravel路由：

Route::delete('/users/{user}', [UserController::class, 'destroy']);

控制器方法：

public function destroy(User $user)
{
    $user->delete();

    return response()->noContent();
}

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