从Next.js页面调用Laravel API时出现内部服务器错误

Question

我有一个在Laravel工作的API。使用Postman.

测试Laravel项目文件夹和Next.js项目文件夹在同一个父laravel-next文件夹中。(Laravel在localhost:8000, Nextjs在localhost:3000)

要获得所有项目的列表，我使用这个API端点:http://localhost:8000/api/products/。这是php artisan route:list的输出:

+--------+-----------+------------------------+------------------+------------------------------------------------+------------+
| Domain | Method    | URI                    | Name             | Action                                         | Middleware |
+--------+-----------+------------------------+------------------+------------------------------------------------+------------|
|        | GET|HEAD  | api/products           | products.index   | AppHttpControllersProductController@index   | api        |
|        | POST      | api/products           | products.store   | AppHttpControllersProductController@store   | api        |
|        | GET|HEAD  | api/products/{product} | products.show    | AppHttpControllersProductController@show    | api        |
|        | PUT|PATCH | api/products/{product} | products.update  | AppHttpControllersProductController@update  | api        |
|        | DELETE    | api/products/{product} | products.destroy | AppHttpControllersProductController@destroy | api        |   

我已经插入了几行products表，这就是我的api/productsGET方法看起来像:

public function index()
{
return ProductResource::collection(Product::all());
}

它可以工作，因为当我在浏览器中手动输入localhost:8000/api/products时，显示了带有产品的JSON对象。

但是当我尝试从Next代码调用API时，我得到500 (Internal Server Error)。

这是product.jsx代码:

function Product({ data }) {        
}      

export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`http://localhost:8000/api/products/`, {
method: 'GET',
mode:'cors',
})
const data = await res.json()        

// Pass data to the page via props
return { props: { data } }
}

export default Product

Answer 1

我发现了问题:我只是在React组件的render函数中没有任何代码。我需要返回一些东西:

function Product({ data }) {    
//return something here!
return (
<div>Some data</div>
)
}      

//rest of the code remains the same