Q. 開発環境で複数サーバを立ち上げたら CORS のポリシーで通信できない(Sinatra)

A. sinatra-cors で通信を許可する

require 'sinatra'
require 'sinatra/cors'

set :allow_origin, 'http://example.com http://localhost:8081' # アクセスしてくる開発環境サーバをスペース区切りで追記
set :allow_methods, 'GET,HEAD,POST'
set :allow_headers, 'content-type,if-modified-since'
set :expose_headers, 'location,link'

get '/book.json' do
  content_type :json
  File.read(File.expand_path('./becoming_a_better_programmer.json'))
end

状況

• Vue.js で JSON を GET して、そのデータをHTML ドキュメントに落とし込むコードを書こうとしていた
• vue-cli で Vue.js を書く環境を初期化した
• vue-cli が用意している開発用サーバを立ち上げた
• とりあえず Sinatra で JSON を渡してあげようとしていた

CORS における Same-origin policy

An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page - https://en.wikipedia.org/wiki/Same-origin_policy

URI scheme, host name までは同じだけど、 port number が違ったので、 same origin じゃないことになってた

今回は開発用のローカル サーバなので、許可しても懸念される問題は起きない

Link

• jdesrosiers/sinatra-cors: CORS support for Sinatra applications - GitHub
• Cross-origin resource sharing - Wikipedia
• Same-origin policy - Wikipedia
• Sinatra