如何从 ReactJS 组件调用 Laravel Api 路由？答案

【问题标题】：How to call a Laravel Api route from ReactJS component?如何从 ReactJS 组件调用 Laravel Api 路由？
【发布时间】：2020-03-23 21:42:54
【问题描述】：

我有一个使用 Laravel 5.7 开发的 API，与使用 ReactJS 开发的客户端链接。

我有一个显示餐厅列表的页面，每个餐厅项目后面都有一个删除按钮。

所以我希望当我点击这个按钮时餐厅将被删除，换句话说，组件调用 Laravel API 的路由，该路由调用控制器中的方法来销毁这个项目。

这是我调用delete方法的API路由。

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

我尝试了这个尝试，但没有任何改变：

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>
}
}

最后，当我打开控制台时，它会显示这些错误：

DELETE http://myapi.com/version/public/post/2146 500（内部服务器错误）。

CORS 策略阻止了从源“http://myapi.com/v003/public/post/2146”获取“http://myapi.com/v003/public/post/2146”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

Uncaught (in promise) TypeError: Failed to fetch.

PS：我是 ReactJs 框架的初学者！

【问题讨论】：

控制台有错误吗？
是的，它在控制台中显示了不止一个错误
请把错误写在你的问题中
我已经添加了你现在可以查看
尝试在标题前添加mode : 'no-cors',

标签： reactjs laravel api fetch

【解决方案1】：

在您提供错误的编辑问题后，此答案无效。您的错误是由于 CORS。

您需要使用then 子句在成功时提供操作。否则你也可以使用async/await 等待回复。更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch。

【讨论】：

那么解决办法是什么？

【解决方案2】：

将以下行添加到 bootstrap/app.php：

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

【讨论】：

【解决方案3】：

错误 500 表示您的 laravel 类 PostController->destroy 方法有错误。您可以在开发工具中的浏览器控制台上显示错误

【讨论】：