Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@K_ichi

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

More than 5 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が叩けましたー!

11
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?