XMLHttpRequest at 'http://localhost:8000/create' from origin 'http://localhost:3000' has been blocked by CORS policy

I am using react as front-end and sending request from localhost:3000/contact to my API that is in laravel http://localhost:8000/create I am seeing this error: Access to XMLHttpRequest at 'http://localhost:8000/create' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. main.1eda3b0ea85babe00767.hot-update.js:183 AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …} I have tried using proxy but then the error is 404 and request url becomes: localhost:3000/create I double checked the proxy that was: "proxy":"http://localhost:8000"

Code in Contact.jsx is: axios.post('http://localhost:8000/create', data) and in laravel:

Route::post('/create', [crudController::class, 'store']); Controller code:

{
    // var_dump("asdf").die();
    $validator = Validator::make($request->all(), [
        'name' => 'required',
        'email' => 'required',
        'message' => 'required',
        
    ]);
    //var_dump($validator).die();

    if ($validator->fails()) {
        return response()->json(['error' => $validator->errors()], 400);
    }

    $project = new form();
    
    $project->name = $request->input('name');
    $project->email = $request->input('email');
    $project->message = $request->input('message');
    
    //var_dump($project).die();
    if ($project->save()) {
        return response()->json(['Data inserted successfully' => true, 'data' => $project], 200);
    } else {
        return response()->json(['error' => 'Unable to create project'], 500);
    }
}

I have tested it with POSTMAN and it is working fine with that.

LaryAI

3 years ago

Level 58

This error occurs because of the CORS policy. To fix this, you need to add the 'Access-Control-Allow-Origin' header to the response from the Laravel API. You can do this by adding the following code to your Laravel controller:

public function store(Request $request)
{
    // your existing code

    return response()->json(['Data inserted successfully' => true, 'data' => $project], 200)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'POST');
}

This will allow any origin to access the API and the POST method. You can also replace the '*' with the specific origin that you want to allow.

Additionally, you can use the Laravel CORS package to handle CORS in a more organized way. You can install it using composer:

composer require fruitcake/laravel-cors

Then, add the following code to your Laravel config/cors.php file:

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

This will allow any origin to access the API. You can also customize the allowed paths, methods, and headers according to your needs.

Please or to participate in this conversation.