バスケ好きエンジニアのブログ

バスケの事はそんなに書いてません

Parseでクロスドメイン通信

外部のAPIを呼ぶ時等に"XMLHttpRequest cannot load 〜 is not allowed by Access-Control-Allow-Origin" みたいにエラーになるケースがあります。ajaxでクロスドメイン通信をする際にサーバ側でAccess-Control-Allow-Origin をつけないといけないというやつです。 ただ、外部の場合はそうもいかないのでjsonpを使ったり自前のサーバを介したりする必要があります。後者の自前のサーバを介す際にPHPのサンプルなどはajaxでクロスドメイン通信を実現するphpで見つける事ができたのですがPHP用のサーバを用意するのが面倒という事もあってParseでできるかどうか試したので紹介しておきます。

ちなみにParseとは個人のスマホアプリ開発者がParseを使うべき15の理由の引用ですがMBaaS(Mobile Backend as a Service)で最も有名なサービスの一つです。 Parseの設定は以下のクイックスタートを見て設定しました(ログインしないと見れないかも) JavaScript Developers Guide | Parse

ここのcloud/main.jsを

Parse.Cloud.define("hello", function(request, response) {
  Parse.Cloud.httpRequest({
    url: 'http://www.shigotonavi.co.jp/api/search/',
    params: {
        key: "{しごとナビのアプリkey}",
        spc: request.params.spc,
    },
    success: function(httpResponse) {
      response.success(httpResponse.text);
    },
    error: function(httpResponse) {
      console.error('Request failed with response code ' + httpResponse.status);
    }
  });
});

としています。今回はしごとナビのAPIを使いたかったのでそのようなサンプルですがクライアントからhelloとリクエストを投げるとしごとナビのAPIを叩いてその結果をクライアントへ返しています。spcはしごとナビ側の検索条件なので気にしないでください。

ちなみにクライアント側は

Parse.initialize("{parseのappID}", "parseのjavascript Key");
Parse.Cloud.run('hello', {spc: "001"}, {
  success: function(result) {
    console.log(result);
  },
  error: function(error) {
  }
});

ParseJavascriptSDKのinitializeをしてhelloを叩いてるのみです。簡単。

Parse。こういう柔軟な使い方できるので便利だと思います。