php - Angular8-ის გამოყენებით JWT ავტორიზაცია არ მუშაობს

ქვემოთ მოცემულია PHP API სკრიპტი, რომელიც კლიენტის მიერ არის მოწოდებული. როდესაც მე ვაშენებ მას ლოკალურად, სტატიკური მონაცემები წარმატებით შენახულა API სერვერზე.

<?php
    //creating payload parameters:
    $classTitle = 'Demo Class on 3rd April, 2020';
    $classInfo = 'This is a demo class scheduled to understand API';
    $classDateTime = '2020-11-12 11:30 AM';
    $timezone = 'Asia/Kolkata';
    $classDuration = 15;
    $classRecording = 'yes';
    $classAutoStart = false;
    $recordingAutoStart = false;
    $classVideoRes = 720;


    /*xyz.com*/
    $apiKey = '12345';
    $secretKey = '12345';

    // Create token header as a JSON string
    $header = json_encode(['alg' => 'HS256','typ' => 'JWT']); // ensure to place first alg part and next typ part

    // Create token payload as a JSON string
    $payload = json_encode(['classTitle' => $classTitle ,'classInfo' => $classInfo ,'classDateTime' => $classDateTime ,'timezone' => $timezone ,'classDuration' => $classDuration ,'classRecording' => $classRecording ,'classAutoStart' => $classAutoStart ,'recordingAutoStart' => $recordingAutoStart ,'classVideoRes' => $classVideoRes ,'apiKey' => $apiKey]);

    // Encode Header to Base64Url String
    $base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($header));

    // Encode Payload to Base64Url String
    $base64UrlPayload = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($payload));

    // Create Signature Hash
    $signature = hash_hmac('sha256', $base64UrlHeader . "." . $base64UrlPayload, $secretKey , true);

    // Encode Signature to Base64Url String
    $base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($signature));

    // creating JWT token variable
    $jwt_token = $base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature;

    // creating authorization varibale
    $authorization = 'Bearer '.$jwt_token;

    ?>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $.ajax
        ({
        type: "POST",
         url: 'https://xyz/client/schedule',
        contentType: 'application/json',
        data: JSON.stringify({
            "apiKey": "12345"
        }),
        dataType : 'json',
        headers: {
        'authorization': '<?php echo $authorization; ?>'
        },
        success: function(retval)
        {
        // alert(retval);
        console.log(retval);
        // var success = retval.success;
        }
        });
    </script>

მე პირდაპირ ვაკითხავ პარამეტრებს ზემოთ მოცემულ PHP API-ს, მაგრამ ეს მაინც არ მუშაობს, ჩემი უფროსი მითხრა, რომ უნდა გამოიძახო ზემოთ მოცემული კოდი Angular-იდან. მე დავწერე კოდი, მაგრამ ვერ ვახერხებ წარმატებით შენახვას. ქვემოთ არის ჩემი Angular კოდი.

ქვემოთაა ჩემი მოდელის კლასი

export class Schedule1 {

classTitle: string;
classInfo: string;
classDateTime: string;
timezone: string;
classDuration: number;
classRecording:string;
classAutoStart: boolean;
recordingAutoStart: boolean;
classVideoRes: number;
    
   constructor() {
    
      
   }

  }

ქვემოთ არის component.ts, სადაც ღილაკზე დაჭერისას გადასცემია სტატიკური მნიშვნელობები

import { Schedule1 } from '../Models/Schedule1.model'


   Schedule1: Schedule1 = new Schedule1();

    addSchedule(scheduleForm: NgForm): void {

    //static data parameter passing
    this.Schedule1.classTitle='hi Class on 3rd April, 2020';
    this.Schedule1.classInfo= 'This is a demo class scheduled to understand API';
    this.Schedule1.classDateTime= '2020-11-12 11:30 AM';
    this.Schedule1.timezone= 'Asia/Kolkata';
    this.Schedule1.classDuration= 15;
    this.Schedule1.classRecording= 'yes';
    this.Schedule1.classAutoStart= false;
    this.Schedule1.recordingAutoStart= false;
    this.Schedule1.classVideoRes= 720;


    //const data = JSON.stringify(this.Schedule1);
    const data = { 
    apiKey: "dcbf187d-bdfe-431b-8f60-fa19bf51cd85", 
    data:  JSON.stringify(this.Schedule1)
    } 

    this.subscription = this.userSvc
    .fetchData("https: //xyz.com/client/schedule", data)
    .subscribe(
    data => {
    // Data on Success
    console.log("data", data);
    },
    error => {
    console.log("error", error);
    }
    );

    }

კი, ქვემოთ არის service.ts

  fetchData(url: string, data: any): Observable<any> {
    const headers = {
    
    Authorization: "Bearer "+"1234",
     "My-Custom-Header": "foobar",
    contentType: "application/json"
    };

   return this.http.post(url, data, {
    headers
    });
   }

კონსოლში ეცინი ამ შეცდომა.

პასუხი #1

გთხოვთ სცადო შემდეგი ცვლილებები თქვენს კოდში, რათა გადაამოწმოთ, მუშაობს თუ არა:

პირველი შეცვლა:

 const data = this.Schedule1; 

მეორე შეცვლა

 fetchData(url: string, data: any): Observable<any> {
    const headers = {
    
    Authorization: "Bearer "+"dcbf187d-bdfe-431b-8f60-fa19bf51cd85",
     "My-Custom-Header": "foobar",
    contentType: "application/json"
    };

   return this.http.post(url, data, {
    headers
    });
   }

პასუხი #2

მიმაჩნია, რომ თქვენ უნდა განსაზღვროთ მოთხოვნის ტიპის ოპცია, რომელსაც გადასცემთ მოთხოვნაში, ამიტომ უნდა გამოიყენოთ

return this.http.post(url, data, headers: new HttpHeaders({
   'Content-Type':  'application/json',
   'My-Custom-Header': 'foobar',
   Authorization: 'my-auth-token'
}));`

ასევე, თქვენ უნდა იმპორტოთ HttpHeaders

import { HttpHeaders } from '@angular/common/http';

ცადეთ გამოიყენოთ unblock cors გაფართოება თქვენს ბრაუზერში და ისევ შეამოწმეთ