How to call a Laravel API route from ReactJS component?

Question

I have an API developed with Laravel 5.7 linked with the client side which is developed with ReactJS.

I have a page which shows a list of restaurants, and there's a delete button behind every restaurant item.

So I want when I click this button the restaurant will be deleted, in other words the component calls the route of the Laravel API which calls the method in the controller to destroy this item.

This is my API route who calls the method of the delete.

Route::delete('/post/{id}', 'PostController@destroy');.

And I tried this attempt but nothing changed:

class RestaurantCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      redirect: false,
    }
  }

  deleteRestaurant(restaurantId) {
    fetch('http://myAPI.com/version/public/post/' + restaurantId, {
      method: 'DELETE',
      header: {
        'Accept': 'application/json',
        'content-Type': 'application/json'
      }
    });

  }
render ()
 {
//...
<button onClick={() => this.deleteRestaurant(this.props.id)}>Delete</button>
}
}

Finally when I open the console it shows me those errors:

DELETE http://myapi.com/version/public/post/2146 500 (Internal Server Error). Access to fetch at 'http://myapi.com/v003/public/post/2146' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Uncaught (in promise) TypeError: Failed to fetch.

PS: I'm a beginner in ReactJs Framework !

@bugfixer it's not working it shows me another error that the delete method does'nt work in the no-cors mode — Belhedi Rafaa, Nov 28 '19 at 09:40
Follow this question. i dont have laravel setup right now, ISSUE MIGHT BE ON LARAVEL END : https://stackoverflow.com/questions/56158474/cors-issue-with-react-app-and-laravel-api — Bugfixer, Nov 28 '19 at 09:43

Miguel Cabrera · Answer 1 · 2019-11-28T09:39:17.443

0

After your edited question providing the error, this answer is invalid. Your error is due to CORS.

You need to use the then clause to provide an action when succeed. Otherwise you can also use async/await to wait for the response. More info: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch.

edited Nov 28 '19 at 09:39

answered Nov 28 '19 at 09:32

Miguel Cabrera

191
1
6

So what is the solution ? – Belhedi Rafaa Nov 28 '19 at 09:41

score 0 · Answer 2 · answered Nov 28 '19 at 09:54

0

Add following lines to bootstrap/app.php:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

answered Nov 28 '19 at 09:54

Sumit Kumar

763
9
14

score -1 · Answer 3 · answered Jun 28 '21 at 20:06

-1

Error 500 mean you have an error into your laravel class PostController->destroy method. You can display error on browser console in development tools

answered Jun 28 '21 at 20:06

optimizer

1

How to call a Laravel API route from ReactJS component?

3 Answers3