2016-06-28 6 views
2

私はPHPでメールサービスを作成しました。このサービスは一部のユーザーに手紙を送ります。ここにコードがあります:AngularJsのCORSリクエスト

<?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); 

?> 

Angular.jsを使用してこのサービスにクロスドメイン要求を作成する必要があります。 のXMLHttpRequestがmy.azurewebsites.net/mail.phpロードすることはできません:私は次のエラーを持っている結果

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: "[email protected]", 
     emailFrom: "[email protected]", 
     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 
      } 
     }); 

    } 
}); 

: はここに私のコードです。プリフライト要求への応答がアクセス制御チェックを通過しない:要求されたリソースに「アクセス制御許可」がない。 Origin 'localhost:11708'はアクセスできません。

サーバー側のコードを変更することはできません。誰かがAngularでこの問題を解決するのに役立つことができますか?

ありがとうございます。

答えて

1

私は、Apacheのバーチャルホストの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> 

そして、それが魅力のように動作しますが、この助けとなることがあります。

+0

をありがとう、私は私のサーバー側でこれらのヘッダを追加しました:ヘッダ( 'アクセス制御 - 許可 - メソッド:POST、GET、PUT、DELETE、OPTIONS '); –

+0

最初のセクションが重要です。 –

+0

はい、私もそれを追加しました:header( 'Access-Control-Allow-Origin:*'); –

0

簡単に置くことはできません。

CORSは、角度サービスのためにサーバー内で有効にするか、実際にはそれと通信する外部サービスとして有効にする必要があります。

参考:リクエストとレスポンスをチェックするhttps://gist.github.com/mlynch/be92735ce4c547bd45f6

使用シオマネキやクロムデベロッパーツール。

サーバーからの応答には、CORSヘッダーが必要です。 は、角度サービス要求を変更すると何か良い

を行うことはありませんさらにあなたは、このリンクをチェックすることができます - https://forum.ionicframework.com/t/http-no-access-control-allow-origin-problem-on-post/5625/6

+0

私は、サーバー側にヘッダー( 'アクセス制御許可元:*')を追加しました。 「角度サービスリクエストを変更しても何の効果もありません」とはどういう意味ですか? –

関連する問題