0

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:

public function store(Request $request)
{
    // 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.

Christian Baumann
  • 3,188
  • 3
  • 20
  • 37
Rehman Ali
  • 1
  • 2
    different port number signifies different origin - need to add suitable headers to your PHP script, ie: `header('Access-Control-Allow-Origin: *')` for example – Professor Abronsius Apr 28 '23 at 06:47
  • 1
    The solution to this is to have your PHP application respond to requests with the correct headers which indicate to the browser that requests to that application from the localhost:3000 domain are acceptable. You can read more about it here: [Cross-Origin Resource Sharing (CORS)](https://stackoverflow.com/questions/8719276/cross-origin-request-headerscors-with-php-headers) including the concepts, how it works and what you need to do to enable cross-origin requests in your application. It's a common issue, so it's worth learning about it in detail. – ADyson Apr 28 '23 at 08:27
  • 1
    `I have tested it with POSTMAN and it is working fine with that`...because a request from Postman (or any other non-browser, non-ajax client) isn't considered to be a cross-origin AJAX request, so it isn't subject to CORS restrictions. Again, read the links above to learn more. – ADyson Apr 28 '23 at 08:30
  • Thank you for all the help. I got it resolved by modifiying my existing code to this code: fetch('http://localhost:8000/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) and in API: Log::info($request->json()->all()); TO see if i was receiving the data from my form to api – Rehman Ali Apr 28 '23 at 09:26
  • @RehmanAli if you answer your original question, you can mark it as resolved – UnderDog May 06 '23 at 20:34

0 Answers0