Help us understand the problem. What is going on with this article?

Mithril.js と Phoenixで作ったAPIを連携

More than 3 years have passed since last update.

やること

Mithril.jsからPhoenix(Elixir)で作ったAPIにリクエストを投げてjsonレスポンスを取得する

APIサイド

APIの作成はmixコマンドから

慣れてるということでDBはMySQLを利用
本のタイトルと画像を返却するAPIを作るので、その通りのjsonレスポンスを返すようにコマンドから作る(3行目)
最後にmigrateすると合わせたテーブルが出来る。

$ mix phoenix.new api --database mysql
$ mix ecto.create
$ mix phoenix.gen.json Book books title:string img_url:string
$ mix ecto.migrate

これで下記のURLにリクエストをかけるとデータが返ってくるAPIが出来る。

http://localhost:4000/api/book/1

データを仮で入れてから
curlでリクエストを投げて、レスポンスがちゃんと返ってくるのを確認。

$ curl -H "Content-Type: application/json" http://192.168.33.10:4000/api/books/1
{"data":{"title":"本のタイトル","img_url":"http://img.url.jp/img.jpg","id":1}}

クライアントサイド

MithrilのModel。 Book.read()を呼ぶとAPIからデータを取得してBookインスタンスを生成して返却する。

book.js
var Book = function(data) {
  this.title = m.prop(data.title);
  this.img   = m.prop(data.img);
};

Book.read = function() {
  return m.request({method: "GET", url: "http://localhost:4000/api/books/1"})
    .then(function (jsonData) {
      return new Book({title: jsonData.data.title, img: jsonData.data.img_url});
    });
};

実際に実行すると下記のようなエラーが発生。(クライアントサイドはlocalhost:3000から配信)
クロスドメインのリクエストは許可されておらずリクエストが弾かれた。
許可設定をサーバサイドでしてあげないといけない。

XMLHttpRequest cannot load http://localhost:4000/api/books/1. The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4000' that is not equal to the supplied origin. Origin 'http://localhost:3000' is therefore not allowed access.

下記を参考にPhoenix側に処理を追加する
参考: http://www.leighhalliday.com/cors-in-phoenix

APIサイド

まず、上記参考のライブラリを導入。

mixの設定ファイル。最後にcors_plugを入れる

mix.exs
  defp deps do
    [{:phoenix, "~> 1.0.3"},
     {:phoenix_ecto, "~> 1.1"},
     {:mariaex, ">= 0.0.0"},
     {:phoenix_html, "~> 2.1"},
     {:phoenix_live_reload, "~> 1.0", only: :dev},
     {:cowboy, "~> 1.0"},
     {:cors_plug, "~> 0.1.4"}]
  end

上記を追加したら下記のコマンドでライブラリが追加される

$ mix deps.get

追加したらrouter.exのAPI用pipelineにCORSPlugのplugを追加。
originを指定するとheaderに Access-Control-Allow-Originが追加される。今回は作ったクライアントサイドから見れればいいので、下記のように指定。

router.ex
pipeline :api do
    plug CORSPlug, [origin: "http://localhost:3000"]
    plug :accepts, ["json"]
  end

これで mix phoenix.server で再起動をかければめでたくクライアントサイドからAPIが叩けましたー!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした