Hello,

I am encountering a CORS issue in my Laravel Vue application, specifically when performing store and update operations on one of my CRUD endpoints, which it work in local but not in production. Here’s a detailed breakdown of the problem:

Issue Description:

I have a Laravel Vue application in production where authentication and CRUD operations work smoothly except for the "works" CRUD. When trying to store or update a "work" entry, I receive the following CORS error:

Access to XMLHttpRequest at 'https://backend.mywebsite.com/api/works' from origin 'https://mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Interestingly, CRUD operations for "category" and "customer" work without any problems, and validation for "works" succeeds but the issue arises post-validation.

Controller Code:

Store:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Requests\Api\WorkRequest;
use App\Http\Resources\WorkResource;
use App\Models\Work;
use Exception;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Illuminate\Support\Arr;
use Illuminate\Http\Request;

class WorkController extends Controller
{
    public function store(WorkRequest $request)
    {
        $validatedData = $request->validated();

        try {
            $validatedData['customer_id'] = $validatedData['customer'];
            $validatedData['category_id'] = $validatedData['category'];
            $validatedData = Arr::except($validatedData, ['customer', 'category']);

            $work = Work::create($validatedData);
            $work->load(['customer', 'category']);

            return new WorkResource($work);
        } catch (Exception $e) {
            return response()->json(['error' => 'Unable to create work', 'message' => $e->getMessage()], 500);
        }
    }

Update:

    public function update(WorkRequest $request, string $id)
    {
        $validatedData = $request->validated();

        try {
            $validatedData['customer_id'] = $validatedData['customer'];
            $validatedData['category_id'] = $validatedData['category'];
            $validatedData = Arr::except($validatedData, ['customer', 'category']);

            $work = Work::findOrFail($id);
            $work->update($validatedData);
            $work->load(['customer', 'category']);

            return new WorkResource($work);
        } catch (ModelNotFoundException $e) {
            return response()->json(['error' => 'Work not found', 'message' => $e->getMessage()], 404);
        } catch (Exception $e) {
            return response()->json(['error' => 'Unable to update work', 'message' => $e->getMessage()], 500);
        }
    }
}

Resource Code:

<?php

namespace App\Http\Resources;

use App\Http\Resources\CustomerResource;
use App\Http\Resources\CategoryResource;
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;

class WorkResource extends JsonResource
{
    public function toArray(Request $request): array
    {
        return [
            'id' => $this->id,
            'customer' => new CustomerResource($this->whenLoaded('customer')),
            'category' => new CategoryResource($this->whenLoaded('category')),
            'location' => $this->location,
            'details' => $this->details,
            'price' => $this->price,
            'percentage' => $this->percentage,
            'status' => $this->status,
            'createdAt' => $this->created_at->format('Y-m-d'),
        ];
    }
}

Additional Information:

• Backend: Laravel
• Frontend: Vue.js
• Environment: Production
• CORS Configuration: I’ve configured CORS in config/cors.php to allow necessary origins, headers, and methods.

The only different between this CRUD with others in here I load relations

Thank you in advance for your assistance!