'angular (typescript) Unknown Error status: 0 when make a request from android browser

I'm trying to make a http post request (to PHP file that return a text like: echo json_encode("Hello world");) from my angular app in google chrome browser and its work well from PC, but when I access my app from android browser its return:

ERROR: HttpErrorResponse { headers: HttpHeaders, status: 0, statusText: "Unknown Error" ...

I'm not using Android Studio to run my angular app on emulator, I'm using my smartphone for testing. I've read more articles that problem can be in CORS; I'm configuring CORS in PHP cros.php:

<?php 
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: PUT, GET, POST');
header('Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, X-Requested-Width, Content-Type, Accept, Authorization');
?>

And in my return text PHP file test_create_user_folder.php I have this code:

<?php

    require("cros.php");
    echo json_encode("Hello world");

?>

In TypeScript file login.service.ts I have the following code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  baseUrl = 'http://localhost/MyApp/api';

  constructor(private http: HttpClient) { }

  testHttpPost() {
    this.http.post<any>(`${this.baseUrl}/test_create_folder_user.php`, {}).subscribe(data => {
        console.log("DATA: " + JSON.stringify(data));
    })
  }
}

I call testHttpPost() funnction in login.component.ts file from helloWorldMessageTest() function:

import { Component, OnInit } from '@angular/core';
import { LoginService } from './service/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private loginService: LoginService) { }

  ngOnInit(): void {}

  helloWorldMessageTest(event: any) {

    let selectedFile = event.target.files[0]
    console.log("selected file: " + selectedFile.name);
    console.log(selectedFile);

    this.loginService.testHttpGet()
  }  
}

And helloWorldMessageTest() function I call when click on button from login.component.html file:

<!DOCTYPE html>
<html>
<head>
    <title>My app</title>
    <link rel="stylesheet" type="text/css" href="login.component.css">
</head>
<body>
    <div id="grid-container">
        <form id="formUploadProfilePhoto" method="post" enctype="multipart/form-data">
            <input style="display: none;"  type="file" accept="image/*" (change)="helloWorldMessageTest($event)" #selectFile>
            <button (click)="selectFile.click()">Select file</button>
        </form>
        <p>Upload your photo!</p><br><br><br>
    </div>
</body>
</html>

Well when I click button from my phone I get it: enter image description here

Who can help me I am very grateful

phpangulartypescript


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions