CORS request in AngularJs - php

Question

I have created a mail service on php, this service send letter to some user. Here is a code:
<?php
require 'vendor/autoload.php';
header('Content-type : application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: X-Requested-With, content-type');
$response = array(
'text' => '');
if(!empty($_POST)){
$json = json_decode($_POST["req"]);
$key = $json->key;
$sub = $json->subject;
$toemail = $json->emailTo;
$FromEmail = $json->emailFrom;
$html = $json ->html;
$sendgrid = new SendGrid($key);
$email = new SendGrid\Email();
$email->addTo($toemail)
->setFrom($FromEmail)
->setSubject($sub)
->setHtml($html);
$sendgrid->send($email);
$response['text'] = 'Email was sent from '.$FromEmail.' to'. $toemail.'. Success.';
}else{
$response['text'] = 'Sorry! $_POST is undefind';
}
echo json_encode($response);
?>
I need to create a cross domain request to this service using Angular.js.
Here is my code:
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
app.controller("emailCtrl", function ($scope, $http) {
var dataForAdminNewsletter = angular.toJson({
key: "********************************************",
subject: "New Email",
emailTo: "mail1#mail.com",
emailFrom: "mail1#mail.com",
html: 'You have a new subscriber' + $scope.emailField
});
$scope.sendPost = function () {
$http({
url: 'http://my.azurewebsites.net/mail.php',
method: "POST",
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
data: {
"req": dataForAdminNewsletter
}
});
}
});
As the result I have got the next error: XMLHttpRequest cannot load my.azurewebsites.net/mail.php. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:11708' is therefore not allowed access.
I can not change the code on the server side. Can somebody help me to resolve this issue with Angular?
Thank you.

Answer 1

I am using this lines in apache virtual host conf,
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>
<IfModule mod_headers.c>
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
</IfModule>
And it works as charm, may be this help.

Answer 2

simply put- You can't.
CORS should be enabled in the server for the angular service or as a matter of fact any external service to communicate with it.
Ref: https://gist.github.com/mlynch/be92735ce4c547bd45f6
Use fiddler or chromium devTools to check the request and response.
The response from the server should have the CORS Header.
changing the angular service request will not do any good
additionally You can check this link - https://forum.ionicframework.com/t/http-no-access-control-allow-origin-problem-on-post/5625/6