Ci-dessous le script api php donné par le client lorsque je rencontre des données locales puis statiques stockées avec succès dans le serveur api.
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
});
}
Directement, je passe les paramètres à l'api php ci-dessus, puis cela ne fonctionne pas non plus, mon supérieur m'a dit que vous devez appeler le code ci-dessus à partir d'angular J'ai écrit du code mais je ne suis pas en mesure de stocker avec succès ci-dessous mon code angulaire.
Ci-dessous ma classe de modèle
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);
}
);
}
Ci-dessous se trouve component.ts sur le clic du bouton passant des valeurs statiques
export class Schedule1 {
classTitle: string;
classInfo: string;
classDateTime: string;
timezone: string;
classDuration: number;
classRecording:string;
classAutoStart: boolean;
recordingAutoStart: boolean;
classVideoRes: number;
constructor() {
}
}
Ci-dessous, service.ts
<?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>
dans la console obtenant cette erreur.
4 Réponses :
Pouvez-vous essayer les modifications suivantes dans votre code pour vérifier si cela fonctionne:
Premier changement:
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
});
}
Deuxième changement
const data = this.Schedule1;
xyz.com/client/schedule:1 POST https: //xyz.com/client/schedule 502 (Bad Gateway) Schedule: 1 Accès à XMLHttpRequest à 'https: //xyz.com/client/schedule' from origin ' localhost : 4200 'a été bloqué par la stratégie CORS: aucun en-tête' Access-Control-Allow-Origin 'n'est présent sur la ressource demandée. schedule.component.ts: erreur 145 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https: //xyz.com/client/schedule", ok: false,…} obtenant une erreur dans journal de la console. @Prince
Veuillez utiliser ce lien pour résoudre le problème CORS - techiediaries.com/fix-cors-with-angular-cli-proxy-configurat ion /… .
J'ai ajouté proxyconfig dans l'option: "serve": {"builder": "@ angular-devkit / build-angular: dev-server", "options": {"browserTarget": "my: build", "proxyConfig": " src / proxy.conf.json "}," configurations ": {" production ": {" browserTarget ":" my "}}}. @Prince
Ajout d'un nouveau fichier dans scr également: src / proxy.conf.json obtenant la même erreur. @Prince
{"/ api / *": {"target": " example.com/client/schedule ", "secure": false, "logLevel": "debug"}}. @Prince
J'obtiens la même erreur que celle que vous avez mentionnée ci-dessus. @Prince
Pouvez-vous essayer d'ajouter ci-dessous deux lignes au début de votre code php: header ("Access-Control-Allow-Origin: *"); en-tête ("Access-Control-Allow-Headers: *");
Je pense que vous devez définir le type d'option de demande que vous passez à request afin que vous deviez utiliser
import { HttpHeaders } from '@angular/common/http';
également, vous devez importer HttpHeaders
return this.http.post(url, data, headers: new HttpHeaders({
'Content-Type': 'application/json',
'My-Custom-Header': 'foobar',
Authorization: 'my-auth-token'
}));`
Essayez d'utiliser l'extension débloquer cors sur votre navigateur et vérifiez-la à nouveau
Après la réponse de Prince, l'erreur de xyz.com/client/schedule:1 POST https: //xyz.com/client/schedule 502 (Bad Gateway) Schedule: 1 Accès à XMLHttpRequest à 'https: //xyz.com/client/ schedule 'from origin' localhost: 4200 'a été bloqué par la stratégie CORS: aucun en-tête' Access-Control-Allow-Origin 'n'est présent sur la ressource demandée. schedule.component.ts: erreur 145 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https: //xyz.com/client/schedule", ok: false,…} obtenant une erreur dans journal de la console. @Mohammadamd
vous devez donc ajouter Access-Control-Allow-Headers: Authorization from the backend ou votre nginx @mohdmazharkhan
quel est votre langage backend peut-être que je peux vous aider ou utilisez-vous Nginx? @mohdmazharkhan
En réponse, je reçois ce code HTML: <html> <head> <title> 502 Bad Gateway </title> </head> <body bgcolor = "white"> <center> <h1> 502 Bad Gateway </h1> < / center> <hr> <center> nginx / 1.14.0 (Ubuntu) </center> </body> </html>. @Mohammadamd
Api développé par le client, je ne peux pas avoir l'autorisation du backend, je devrais passer directement d'angular, d'angular seulement, je dois donner le réglage de certains paramètres de cors, comment je dois ajouter des en-têtes access-control-allow-headers dans angular pouvez-vous mettre à jour votre réponse entièrement, @Mohammadamd
avez-vous accès au serveur? veuillez vérifier /var/log/nginx/error.log pour plus de détails sur l'erreur
vous ne pouvez pas ajouter cet en-tête angulaire en fait, vous devez l'ajouter depuis le côté backend enable-cors.org/server_nginx.html cela devrait vous aider @mohdmazharkhan
où je peux obtenir cet emplacement /var/log/nginx/error.log à partir de mes fichiers angulaires. @Mohammadamd
non, vous devez obtenir cet emplacement depuis votre serveur Nginx
parlons. @Mohammadamd
Serveur Nginx signifie serveur api na. @Mohammadamd
Avez-vous le numéro de l'application. @Mohammadamd
Cela peut être sur le serveur api ou sur un autre serveur
vous obtenez cette erreur 'https ://xyz.com/client/schedule' from origin 'localhost:4200' has been blocked by CORS policy car le serveur et le client s'exécutent sur un hôte différent, vous devez exécuter le serveur localement ou essayer ce,
ouvrez chrome à l'aide de cette commande et vérifiez l'onglet réseau du navigateur
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
Avez-vous essayé de configurer un fichier de configuration "src / proxy.conf.json"
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
},
et faites pointer votre "angular.json" vers le fichier de configuration
{
"/api/*": {
"target": "http://localhost:4200",
"secure": false,
"logLevel": "debug"
}
}
ce ne sera qu'à des fins de test (puisque vous n'avez pas accès au serveur, non?)
Vous obtenez une erreur 403 et cela signifie que vous ne transmettez pas correctement le jeton. Le code PHP que vous avez donné ci-dessus sert à générer le jeton. Vous pouvez utiliser n'importe laquelle des bibliothèques pour générer des jetons. Ensuite, votre code angulaire doit d'abord appeler cette URL et stocker le jeton dans le stockage de session local. Vous pouvez utiliser le jeton dans tous les appels consécutifs.
vérifiez la section de demande dans l'onglet réseau et voyez ce qui est envoyé au serveur.