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

Posted 2023-02-22

【中文标题】如何从 ReactJS 组件调用 Laravel Api 路由？

【英文标题】：How to call a Laravel Api route from ReactJS component?

【发布时间】：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',

【参考方案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 方法有错误。您可以在开发工具中的浏览器控制台上显示错误