Angular HTTPClient POST body not sending

Currently I am trying to POST a name, email and message from an angular frontend to a php script running in the same nginx server which then runs phpmailer to send an email containing the name, email and message. Here is the code so far:

import { Component, OnInit } from '@angular/core';
import { Email } from './email';
import {ContactService} from './contact.service';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {NgForm} from '@angular/forms';

const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
})
};

const email = new Email('', '', '');

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

email = new Email('', '', '');

constructor(private http: HttpClient) { }

sendEmail(form: NgForm) {
const value = form.value;
const senderName = value.name;
const senderEmail = value.email;
const senderMessage = value.message;
this.sendMail(senderName, senderEmail, senderMessage);
}

sendMail(senderName, senderEmail, senderMessage) {
console.log(senderName + ' ' + senderEmail + ' ' + senderMessage);
this.http.post('https://ruffstuffcostumes.tk/assets/scripts/email.php',
{
name: senderName,
email: senderEmail,
message: senderMessage,
},
httpOptions
)
.subscribe(
(val) => {
console.log('POST call successful value returned in body',
val);
},
response => {
console.log('POST call in error', response);
},
() => {
console.log('The POST observable is now completed.');
});
}

ngOnInit() {
}

}


When I ran the POST request through postman to check it, it ran perfectly well and sent out the email containing the required elements, however when I execute a query with this script, even though the console.log(senderName + ' ' + senderEmail + ' ' + senderMessage) does show the values, it doesn't seem to post them in the body at all, and all I get back is the fact that even though a mail was sent, it was sent without any of those values in the body of the email.

console.log(senderName + ' ' + senderEmail + ' ' + senderMessage)

Could it be cross-origin problems (and if so what would be the best way to get around that?), or am I just doing some stupid mistake?

https://url/assets/scripts/email.php?name=username&email=email@protonmail.com&message=hi,%20it%20works!!

POST /assets/scripts/email.php?name=username&email=email@protonmail.com&message=hi,%20it%20works!! HTTP/1.1 Host: url Connection: keep-alive Content-Length: 0 Accept: application/json, text/plain, */* Origin: https://url User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3477.0 Safari/537.36 DNT: 1 Referer: https://url/ Accept-Encoding: gzip, deflate, br Accept-Language: en-GB,en-US;q=0.9,en;q=0.8 Cookie: __cfduid=d41abcfedcaa744a8de652dcbe37dab021530345277

1 Answer
1

Just for completeness. I solved the problem by switching to sending JSON data and parsing it on the php side

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.