I am using angular 2 as front end and PHP, MySQL for my back end.
PHP properly creates json data but angular 2 unable to read the file content. I am getting the below error.
XMLHttpRequest cannot load http://localhost:81/login.json.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 404.
JSON file available at http://localhost:81/login.json location. I am using XAMPP to run my php file.
My angular 2 code is below.
import { Component, OnInit, Input } from '#angular/core';
import { Http, Response } from '#angular/http';
#Component({
moduleId: module.id,
selector: 'app-header-modal',
templateUrl: './header-modal.component.html',
styleUrls: ['./header-modal.component.css']
})
export class HeaderModalComponent implements OnInit {
private data;
constructor(private http:Http){
}
ngOnInit(){
}
ngAfterViewInit() {
this.getData();
}
getData(){
this.http.get('http://localhost:81/login.json')
.subscribe(res => this.data = res.json());
console.log('User Data: '+this.data);
}
}
My PHP code is below.
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With");
include 'connect.php';
$username = str_replace(" ", "", $_POST['username']);
$password = str_replace(" ", "", $_POST['password']);
$query = mysql_query("select username, password, id from registration where username='".$username."' and password='".$password."'");
$result = mysql_fetch_array($query);
if($result){
$data = array(
array('userId' => $result['id'],'userName' => $result['username'])
);
$fp = fopen('login.json', 'w');
fwrite($fp, json_encode($data));
fclose($fp);
?>
<script>
history.go(-1);
</script>
<?php
}
?>
Can somebody help!
This appears to be a CORS issue with the php server backend you are trying to use. You angular App doesn't have the ability to make a request to the php server because of CORS.
Once you have properly configured the php server the request should start working.
More information on CORS.
Related
i've a problem using a php page that execute query on a DB.
The php page is this:
$Query = $_POST['Query'];
// Create connection
$conn = new mysqli($servername, $username, $password,$db);
$result = mysqli_query($conn, $Query);
$emparray = array();
while($row = mysqli_fetch_assoc($result)) {
$emparray[] = $row;
}
echo json_encode(['result' => $emparray]);
mysqli_close($conn);
My Angular request page:
export class RegisterComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit(): void {
}
confirmRegisterClick(username: string, password: string, phoneNumber: string, email: string) {
this.http.post<any>(MYPHPPAGE, new HttpParams().append(QueryNameService, "Select Count(*) As Count From User Where Username='" + username + "'")).subscribe(data => {
console.log(data);
});
});
}
}
This return a json with the result of the query. The problem is that if i execute the call to the php page from postman or from the browser it works well. If i call it from Angular i get this error:
Access to XMLHttpRequest at 'https://www. .... /TestCOR.php' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've tried a lot of online solution anyone work.
I've tried to make a simple php page like that:
<?php
header('Access-Control-Allow-Origin: *');
echo "You have CORS!";
?>
but i always get the same error
Solution Tried:
1:
Add this line to the php page
header('Access-Control-Allow-Origin: *');
2:
Add this lines to the http request header
let headers = new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT',
'Authorization': 'Bearer szdp79a2kz4wh4frjzuqu4sz6qeth8m3',
});
3:
Use a proxy (i don't know if i did it well, i'm noob to Angular)
"/WEBSITEPATH": {
"target": "http:\\localhost:4200",
"secure": false,
"changeOrigin": true
}
And add this line inside angular.json:
"proxyConfig": "proxy.conf.json"
I'm trying to POST data to a PHP backend and receive back the values and push it into an array. Hence, I created a function to do just that. However, I'm not to change the API on the backend (written in PHP). So I cannot change it to suit my normal methods of using POST.
This is my function
test() {
let data = "method=getThis" + "&db=myDatabase"
this.http.post("API URL", data).subscribe(data => {
this.result = data; // get data in result variable
this.items = JSON.stringify(this.result); // then convert data to json string
// console.log(this.items);
this.allData = JSON.parse(this.items); // parse json data and pass json string
// console.log(this.allData.length); // got result of particular string
this.array = [];
for (var i = 0; i < this.allData.length; i++) {
this.array.push({
data1: this.allData[i].data1,
data2: this.allData[i].data2,
})
}
console.log(this.array[0])
})
}
And this is an example function on the backend
else if($_POST['method']=="getThis"){
global $conn;
mysqli_select_db($conn, $_POST['db']);
$name="";
$result=array();
$r=mysqli_query($conn,"select data1,data2 from table");
while ($rs = mysqli_fetch_array($r,MYSQLI_ASSOC)){
array_push($result,$rs);
}
echo json_encode(array("result"=>$result));
}
So how do I actually get it to post? I'm stuck here. I usually post with JSON and then decode the JSON on the backend. But this time around I'm not developing the backend and not changing it so gotta use the one provided.
Posting using POSTMAN with this
method=getThis&db=myDatabase
works well. Not sending JSON just a text. So how do I actually achieve this in Ionic.
You could try it that way. It works for me:
First import:
import { map } from "rxjs/operators/map";
Your function:
test() {
let data = "method=getThis" + "&db=myDatabase"
this.http.post("API URL", data).pipe(
map(res => res.json())
).subscribe(response => {
//Here your code
// 'response' is json
});
}
Since the data you are sending is in plain text, you will need to add a header mentioning the content type.
import { HttpHeaders } from '#angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'text/html'
})
};
this.http.post("API URL", data, httpOptions).subscribe()
PHP side should be return JSON and told browser content type is application/json, please test your code base on one simple page.
//demo.php
<?php
$data = ['message' => 'Hello world.'];
header("Content-Type: application/json; charset=UTF-8");
//If allow cross domain and not configration in Ngix/Apache
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Accept-Encoding, X-Requested-With, Content-Type, Origin, Accept, Authenticationtoken");
echo json_encode($data);
And please try http access demo.php again.
I am trying to send data from angular to PHP. I am using Angular 5.
Here is my Angular service:
#Injectable()
export class SendDataService {
constructor(private http: HttpClient) {
}
configUrl = 'http://localhost:4200/myQuiz/testing/';
sendData(data:any) {
return this.http.post(this.configUrl, data).map(res=>res.json());
}
}
in view.component.ts
const data = {url: url};
this.sendData.sendData(data).subscribe((status) => {
this.postStatus = status;
});
and in index.php
$postdata = file_get_contents('php://input');
$req = json_decode($postdata);
print_r($postdata);
print_r returns me nothing. Whereas in the section Network of console I see this result
help please
So, I have a simple crud Angular web application and for some reason when i try to do an http.post to a php nothing happens. Sorry but i know nothing about web apps and php and i have to deliver this.
Service that contains the call (basically the line that calls the post php is in the update method, but i include all the file because i dont know if there is something wrong elsewhere):
import { Injectable } from '#angular/core';
import { Http, Headers } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class DbService {
public headers:Headers;
constructor(public http:Http) {
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
}
getStock(){
return this.http.get('http://localhost/api/stock/read.php').map(res => res.json());
}
getSales(){
return this.http.get('http://localhost/api/ventas/read.php').map(res => res.json());
}
updateDB(member:string){
let data:Data;
data = {name:member};
console.log(data.name);
this.http.post('http://localhost/api/productos/create.php',
JSON.stringify(data),
{
method: 'POST',
headers: this.headers
});
}
}
interface CarrItem{
id: number,
name: string,
price: number,
stock: number,
quantity: number
}
interface Data{
name: string
}
And this is the php, it works when used in a web browser, i knw cause it inserts correctly into the database.
<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
header("Content-Type: application/json; charset=UTF-8");
header("Accept: application/json;");
require '../config/database.php';
$m_name = "20:23";
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(strlen($m_name)>0){
$insertMember = $pdo->prepare("INSERT INTO member(membershipType, firstName, lastName, sex, birthDate, accumulatedPurchases) values('Dorada', ?, 'M', 'Other', '2018-1-1', 50.0)");
$insertMember->execute(array($m_name));
$otra = $pdo->prepare("INSERT INTO brand(brandName) values('SI')");
$otra->execute();
}
else{
$otra = $pdo->prepare("INSERT INTO brand(brandName) values('NO')");
$otra->execute();
}
Database::disconnect();
?>
First, I think it is working in your browser because you are doing a GET (not a POST) and you are not using any request parameters in your code above. As-is, your code will run into problems getting the request data.
POST-ing JSON data to PHP is a little complex. PHP will not automatically parse the data for you. Instead, you'll have to do something like ...
$jsonEncoded = file_get_contents('php://input');
$jsonDecoded = (array) json_decode($jsonEncoded, true);
INSTEAD OF THAT, MIGHT BE EASIER ... to just let Angular send the data in old-style application/x-www-form-urlencoded format and let PHP auto-parse it into $_POST for you.
let body = new URLSearchParams();
body.set('name', member);
body.set('age', 28);
this.http.post(my_url, body);
I'm trying to recreate Post JSON from angular 2 to php but it doesn't work as there's nothing in the $_REQUEST variable on php side
The code:
searchHttp({body}: any): Promise<any>
{
let headers = new Headers ({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers, method: "post" });
let test_this = {"search": "person"};
return this.http.post(this.post_url, JSON.stringify(test_this), options)
.toPromise()
.then(response =>
{
return response.text();
})
.catch(this.handleError);
}
Is there something I'm missing? I know that posts works with another format because I have that answered in another question.
Also, is http.request better than http.post?
Edit:
After much consultation with Angular/Javascript experts, they believe this is a php issue. So anyone with knowledge of how to accept JSON objects on php side will be gladly welcomed.
angular 2 client side part
ngOnInit() {
let body=Api+'product.php'+'?id=' + this.link_id;
this._callservice.callregister(body)
.subscribe( data => {
this.outputs=data;
},
error => console.log("Error HTTP Post"),
() => console.log("completed") );
}
}
call.service.ts
import {Injectable} from '#angular/core';
import {Router} from '#angular/router';
import {Http, Response, Headers, RequestOptions} from '#angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
#Injectable()
export class AuthenticationService {
constructor(private _http:Http){}
postregister(api:any){
// console.log(api);
let headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, method: "post"});
return this._http.get(api,options)
.map(res => res.json())
.catch(this.handleError);
}
private handleError (error: Response) {
console.error(error);
return Observable.throw(error.json().error || ' error');
}
}
Server side PHP
make sure on server side you have these three lines in php code.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
Php file:
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
$servername = "localhost";
$username1 = "root";
$password = "root";
$dbname = "product";
$e=array("error"=>1,"message"=>"Account Already Exists");
$accountCreated = array( "error" =>0,
"data" => array(
"username" => "amit" ,
"password" => "anypassword",
"role"=> "user",
"id" => "anyid" ) );
// Create connection
$conn = mysqli_connect($servername, $username1, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$username = $_GET["username"];
$Pass = $_GET["password"];
$role= $_GET["role"];
$sql="SELECT COUNT(*) as user FROM users WHERE username = '$username'";
$result = mysqli_query($conn,$sql);
$line = mysqli_fetch_assoc($result);
$count = $line['user'];
if($count!=0)
{
echo json_encode($e);
}
else
{
$sql="INSERT INTO users(username,password,role)VALUES('$username','$Pass','$role')";
$result=mysqli_query($conn,$sql);
$sql="select * from users where username ='$username'";
$result=mysqli_query($conn,$sql);
$line=mysqli_fetch_assoc($result);
{
$accountCreated['data']['username']=$line['username'];
$accountCreated['data']['password']=$line['password'];
$accountCreated['data']['role']=$line['role'];
$accountCreated['data']['id']=$line['id'];
}
echo json_encode($accountCreated);
}
?>
i hope this will work for you .. for json i guess you should pass as options and use json decode for values you get in options.
There doesn't appear to be anything wrong with the Angular code. The issue is in what the PHP is expecting to receive. I am not a PHP expert, but as you've mentioned that it works fine with jQuery, then that indicates that your PHP is expecting a URL-encoded value (as jQuery tends to work with that), not a JSON value.
In other words, what the server is trying to parse is:
search=person
What you are sending is:
{ "search": "person" }
Try something more like the following to send it in the format you're wanting:
let test_this = { "search": "person" };
let headers = new Headers ({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers, method: "post" });
http.post(this.post_url, test_this, options)