Блог

Главная - Вопросы по программированию - Внутренняя ошибка сервера при вызове Laravel API из Next.js стр.

Внутренняя ошибка сервера при вызове Laravel API из Next.js стр.

#laravel #next.js #laravel-8

Вопрос:

У меня есть работающий API в Laravel. Проверено с помощью почтальона.

Папка проекта 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/products GET выглядит мой метод:

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

Это работает, потому что, когда я вручную набираю в браузере localhost:8000/api/products , отображается объект JSON с продуктами.

Но когда я пытаюсь вызвать 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

Комментарии:

1. Вы используете какую-либо аутентификацию?

2. нет, чистый проект Laravel для тестирования, даже прокомментировал Route::middleware('auth:api') строку из api.php

3. Вы установили свои заголовки?

4. Я так не думаю, где мне это сделать и как?

5. Обновление: Я обнаружил проблему: я ничего не вернул в функции рендеринга!

Ответ №1:

Я обнаружил проблему: у меня просто не было кода в render функции компонента React. Мне нужно кое-что вернуть:

 function Product({ data }) {    
    //return something here!
    return (
        <div>Some data</div>
    )
}      
  
//rest of the code remains the same
Метки: