تعذر الحصول على بيانات خادم api من React

الفرضية · ما تريد تحقيقه

أريد الحصول على json من خادم API باستخدام محاور React.

• الواجهة الأمامية: React.js
• النهاية الخلفية: Laravel5.5

يستخدم أسلوب المصادقة Laravel AUTH الافتراضي.

نظرًا لأننا نريد إرجاع JSON فقط عند تسجيل الدخول على جانب واجهة برمجة التطبيقات ، فإننا نستخدم البرامج الوسيطة (المصادقة) مع توجيه Laravel.

المشاكل التي تحدث · رسائل الخطأ

إذا ضربت واجهة برمجة التطبيقات من المتصفح ، فسيتم عرضها بشكل طبيعي ، ولكن إذا ذهبت عبر محاور React ، فستحصل على الخطأ التالي. 401 (غير مصرح به)

يمكن أن تؤخذ عن طريق الوصول من المتصفح

رموز المصدر

■ React.js

import axios from 'axios';
const host = window.location.protocol + '//api.' + window.location.hostname ;
const path = window.location.pathname

export const getIndex = nowId =>
  axios
    .get(host + '/v1/movie/' + nowId, {
      headers: {
        'Accept': 'application/json',
       },
     })
    .then((results) => {
      const status = results.status
      if(typeof result === 'undefind'){
        return  status
      }
      const indexDatas = results.data[0]
      return  indexDatas
    }).catch(
    error => {}
);

■ Laravel (API)

r /routes/web.php

Route::get('/auth/login/{token}', 'Auth\[email protected]');
Route::get('/auth/logout', 'Auth\[email protected]');
Route::get('/v1/sidemenu', '[email protected]');

Route::group(['prefix'=>'v1', 'middleware' => ['auth']],function(){
    // Movie
    // =======
    Route::group(['prefix'=>'movie', 'middleware' => ['cors']],function(){
        Route::get('/contents', '[email protected]');
        Route::get('/addContents', '[email protected]');
        Route::get('/{id}/getChapter', '[email protected]');
        Route::get('/{id}/getReview', '[email protected]');
        Route::get('/{id}/reviewCount', '[email protected]');
        Route::post('/postReview', '[email protected]');
        Route::get('/review/commit', '[email protected]');
        Route::get('/{id}', '[email protected]');
        Route::get('/list', '[email protected]');
    });

    // Podcast
    // =======
    Route::group(['prefix'=>'audio'],function(){
        Route::get('/list', '[email protected]');
        Route::get('/{id}', '[email protected]');
    });

    // Lecture
    Route::group(['prefix'=>'lecture'],function(){
        Route::get('/', '[email protected]');
        Route::get('/{id}', '[email protected]');
        Route::get('/{id}/schedules', '[email protected]'); 
    });
});

con /config/auth.php

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'token',
        'provider' => 'users',
    ],
],

هل الحل لهذه المشكلة هو إعطاء معلومات المصادقة لرأس جانب الطلب (محاور التفاعل)؟

ثم ، ما نوع الأشياء التي يجب وضعها في الرأس؟ حاولت وضع نفس الشيء كما في الشكل أدناه ، لكنه لم يتحرك.

رأس API

    axios
    .get(host + '/v1/movie/' + nowId, {
      headers: {
        'Accept': 'application/json',
        'Set-Cookie': 'laravel_session=eyJpdiI6IitBVldGM0VORzFZRk1ick1IY2Z5d1E9PSIsInZhbHVlIjoiT3JPeUVHc3BSaE5vRXF0KzB3N2xXRkdXb0xwMDVvS0RZR1VQM0xmMFkySnNrS01KRHVXMTFWNVhTU1wvMTVwa3RDRmNvajVMZGhiU2t4dFEzY1FxdkFnPT0iLCJtYWMiOiJjMjJhYWQ3ZjczMDgwOTExZDI5Njc5OTY4YTg5ZjgxMGI1MDlmYmNkZDJkZTFmNDA5YWMyZjRjOTYxYzc0YzNlIn0%3D;'
       },
     })
    .then((results) => {
      const status = results.status
      if(typeof result === 'undefind'){
        return  status
      }
      const indexDatas = results.data[0]
      return  indexDatas
    }).catch(
    error => {}
);