システム Edit : 2019.03.08 Update : 2024.11.07

ajaxによるクロスドメインへの値受け渡しでエラー

・Monacaを使用したアプリ制作
・アプリ側index.htmlからphpを使った外部サーバへのajaxでの値受け渡し
上記のような連携テストを行っているときに、クロスドメインによる以下のようなエラーがでて、通信に失敗しました。

Access to XMLHttpRequest at ‘https://kohimoto.sakura.ne.jp/test.php’ from origin ‘https://c-ff656a0ab062893d52f5702cec7efa–507299520-8080.monaca-app.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

対応したことは2つです。

Contents

php側に以下のクロスドメインを許可するヘッダーの追加
値の受け渡し先(php側)のurlをSSLにする

php側に以下のクロスドメインを許可するヘッダーの追加

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With");
echo 1;
?>

<?php

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: Origin, X-Requested-With");

echo 1;

とりあえず、値を受けとったら、「1」を返すことにしています。

値の受け渡し先(php側)のurlをSSLにする

    $(function() {
     $.ajax({
      type: 'post',
      url: 'https://〇〇.co.jp/test.php',
      data: {
          'item1': '成功!','item2': '成功2!'
      },
      success: function(data, status, xhr){
      alert(data);
      }
    });
});

$(function() {

$.ajax({

type: 'post',

url: 'https://〇〇.co.jp/test.php',

data: {

'item1': '成功!','item2': '成功2!'

success: function(data, status, xhr){

alert(data);

}

});

SSLに設定されていないサーバに値を送ろうとした際、クロスドメインとは別に下記のようなエラーがでたので、SSL設定します。

Mixed Content: The page at ‘https://console.monaca.mobi/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://〇〇.co.jp/test.php’. This request has been blocked; the content must be served over HTTPS.

通信成功の場合、「1」をalertします。