Search code examples
phpangularionic-frameworkionic3angular-httpclient

Angular/HttpClient - How post data in a php file in my Ionic Project

I’ve been trying to use the HttpClient module and it’s working like a charm for get a json file. However, i try to post data in a php script in my ionic project (src/assets/scripts/php/news.php).

src/assets/scripts/news.php :

header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

$postdata = file_get_contents("php://input", true);

src/pages/news/news.ts :slight_smile :

sendNewsToPhp(news: string){
//let data = JSON.stringify(news);
let data = news;
this.http.post("../assets/scripts/php/news.php", data, {headers: {'Content-Type': 'application/json'}})
  .subscribe(
    response => console.log("Res provider :", response),
    error => console.log("err : ", error)
  );

}

error :

error: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /assets/scripts/php/news.php</pre>\n</body>\n</html>\n"
headers: Object { normalizedNames: Map(0), lazyUpdate: null, lazyInit: lazyInit()}
message: "Http failure response for http://localhost:8100/assets/scripts/php/news.php: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:8100/assets/scripts/php/news.php"

I already tried :

http://localhost:8100/assets/scripts/php/news.php
http://myip:8100/assets/scripts/php/news.php

I think the problem is that my file is in my ionic project. Is it possible to do that?

To know -> i can't access to my php file with url.

Solution

  • I think you make one misunderstand there. PHP working on Apache/Ngix service at port 80, not the ionic serve port, are you think right? In fact, we usually has a separate web service as data provider, so our request url often like this.http[get/post/put/delete]('http://server.domain/api/your-page.php', data) You can update angular config by proxy section slove it, but the proxy settings looks not working after package it to App, so my code is update url = baseUrl + url; before send it.