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 !

Do you have an error in the console?

Damian Peralta
– Damian Peralta

2019-11-28 09:22:54 +00:00
Commented Nov 28, 2019 at 9:22 — Damian Peralta
– Damian Peralta, Commented Nov 28, 2019 at 9:22
yes it shows me more than one error in the console

Belhedi Rafaa
– Belhedi Rafaa

2019-11-28 09:25:48 +00:00
Commented Nov 28, 2019 at 9:25 — Belhedi Rafaa
– Belhedi Rafaa, Commented Nov 28, 2019 at 9:25
Put the errors in your question, please

Damian Peralta
– Damian Peralta

2019-11-28 09:27:31 +00:00
Commented Nov 28, 2019 at 9:27 — Damian Peralta
– Damian Peralta, Commented Nov 28, 2019 at 9:27
I've added them you can check now

Belhedi Rafaa
– Belhedi Rafaa

2019-11-28 09:34:32 +00:00
Commented Nov 28, 2019 at 9:34 — Belhedi Rafaa
– Belhedi Rafaa, Commented Nov 28, 2019 at 9:34
try Adding mode : 'no-cors', just before header

Bugfixer
– Bugfixer

2019-11-28 09:37:19 +00:00
Commented Nov 28, 2019 at 9:37 — Bugfixer
– Bugfixer, Commented Nov 28, 2019 at 9:37

Miguel Cabrera · Accepted Answer · 2019-11-28 09:39:17Z

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, 2019 at 9:39

answered Nov 28, 2019 at 9:32

Miguel Cabrera

1911 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Belhedi Rafaa Over a year ago

So what is the solution ?

Sumit Kumar · Accepted Answer · 2019-11-28 09:54:45Z

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, 2019 at 9:54

Sumit Kumar

82310 silver badges14 bronze badges

Comments

optimizer · Accepted Answer · 2021-06-28 20:06:09Z

-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, 2021 at 20:06

optimizer

1

Collectives™ on Stack Overflow

How to call a Laravel API route from ReactJS component?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related