Laravel+Vue.js项目API调用返回空数组问题求助

Hey there, I totally get how frustrating this must be—spending two days stuck on something that works perfectly in Postman but not your Vue app is the worst. Let’s break down the most likely issues and how to fix them, tailored to your Laravel 5.6 and Vue 2.5.7 setup.

1. Cross-Origin Resource Sharing (CORS) Blocking #

Postman doesn’t enforce CORS rules, but browsers do. If your Vue app runs on a different port (like localhost:8080) than your Laravel API (e.g., localhost:8000), the browser might silently block the request, leading to an empty array.

Fix: #

Install the barryvdh/laravel-cors package to handle CORS in Laravel:

composer require barryvdh/laravel-cors

• Add the service provider to config/app.php:

  Barryvdh\Cors\ServiceProvider::class,
  

• Publish the config file:

  php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
  

• Update config/cors.php to allow your frontend origin (use * temporarily for development):

  return [
      'paths' => ['api/*'],
      'allowed_methods' => ['*'],
      'allowed_origins' => ['http://localhost:8080'], // Replace with your Vue app URL
      'allowed_headers' => ['*'],
  ];
  

• Add the CORS middleware to your API middleware group in app/Http/Kernel.php:

  protected $middlewareGroups = [
      'api' => [
          \Barryvdh\Cors\HandleCors::class,
          // ... other existing middleware
      ],
  ];
  

2. Mismatched Response Structure (Laravel Resource Collections) #

Laravel API Resources wrap collection responses in a data key by default. If you’re trying to assign the root response directly to your Vue array, you’ll end up with an empty array because you’re missing the nested data property.

Example: #

Your Laravel controller returns:

return NoteResource::collection(Note::all());

The actual API response looks like this:

{
  "data": [
    {"id": 1, "title": "My Note", ...},
    // ... your 20 notes
  ]
}

If your Vue code does this, it’s wrong:

axios.get('/api/notes')
  .then(response => {
    this.notes = response.data; // This gets the object with the 'data' key, not the array
  })

Fix: #

Access the nested data property in your Vue response:

axios.get('/api/notes')
  .then(response => {
    this.notes = response.data.data; // Correct! Gets the actual array of notes
  })
  .catch(error => {
    console.error('Error fetching notes:', error); // Always log errors to catch issues early
  });

3. Incorrect API Route Prefix #

Laravel 5.6 automatically adds an api/ prefix to routes in routes/api.php. If your Vue request is missing this prefix, you’re hitting a non-existent endpoint (which might return an empty response or 404, but if error handling is missing, it could show up as an empty array).

Fix: #

Make sure your Vue request includes the api/ prefix:

// Correct:
axios.get('/api/notes')

// Wrong (unless you removed the prefix in RouteServiceProvider):
axios.get('/notes')

4. Authentication/Permission Issues #

If your API returns only notes for the logged-in user, Postman might have an auth token in headers that your Vue app isn’t sending. This would cause Laravel to return an empty array because no authenticated user is found.

Check & Fix: #

• Look at your Laravel controller code—does it have something like Note::where('user_id', auth()->id())->get()?
• In Postman, check the "Headers" tab for an Authorization header (e.g., Bearer YOUR_TOKEN).
• In Vue, ensure you’re sending the auth token with your request:

  axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('auth_token');
  

5. Debugging Steps to Pinpoint the Issue #

If none of the above work, these steps will help you find the root cause:

• Check the browser’s Network tab: Look at the API request—what’s the status code? Is the response content the same as in Postman?
• Log the full response in Vue: Add console.log(response) inside your .then() block to see exactly what Laravel sends back.
• Check Laravel logs: Look in storage/logs/laravel.log for any errors or unexpected query behavior.
• Test the API URL directly in your browser: Paste the API URL (e.g., http://localhost:8000/api/notes) into your browser—do you see the JSON data?

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