CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
CORSでハマったことまとめ - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2014 の12/16の記事です。 こんにちは、エンジニアの@dnskimoです。 先日、はじめてCORSを実装する機会があったので、覚書がてらまとめておきたいと思います。 CORSとは Cross-origin resource sharingの略です。 読み方は「コルス」でいいんでしょうか？ Same-Origin Policyに弾かれずに、異なるドメイン間でリソースを共有する仕組みです。 2014年1月にW3C勧告になり、JSONPに替わる方法として徐々に普及してきているようです（要出典）。 アクセスコントロールの仕様も定義されているので、特定のサイトからのみ利用可能なAPIを作る際などに便利です。 JSONPのような「裏ワザ」的な方法ではないところも個人的に好みです。 詳しいことはネット上に素晴らしい記事がたくさんあるので
![CORSでハマったことまとめ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/70054759c3787b5c8b89449617d22d699ef3b8f9/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F4393f2761db895fd0a5106a3761d1fe12d734abe%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20141216%252F20141216151227.jpg)
jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション
はじめに 簡単にJSONまたはJSONPを読み込みたい場合は以前の記事を参照。 1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法 type 主にGETかPOSTを指定。受け取るときはGET、送信するときはPOST。 url 読み込み先または送信先のURLを指定。例えばJSONを読み込みたいときは以下のようになる。 $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json' }); $.ajaxのurlオプションを使用したサンプル cache キャッシュの有無をtrueかfalseで指定。注意しなければいけないのはJSONの場合はデフォルトでcache:true、JSONPの場合はcache:falseとなっている点だ。つまりJSONをキャッシュをしたくない場合はcache:falseを指定しなければならな
Inline JSONPの長所について (続: サーバサイドからクライアントサイドのJavaScriptを呼び出す際のベストプラクティス) - kazuhoのメモ置き場
サーバサイドからクライアントサイドのJavaScriptを呼び出す際のベストプラクティス - kazuhoのメモ置き場 の件、id:tokuhirom がさくっと HTML::CallJS というモジュールを書いて公開してくれた (Shipped HTML::CallJS - tokuhirom's blog 参照) ので、どういう Inline JSONP を使うとどういう形で書けるか、ぱっと例をあげたいと思います。 まず、サーバサイドのプログラム。 以下は perl で、tokuhirom の HTML::CallJS と Text::MicroTemplate を使っている例。 JavaScript の呼出を保存する配列を用意し、そこに呼出をどんどん追加していっています。一定条件下でのみ特定のクライアントサイド処理を呼び出したり、配列の各要素について呼び出したりすることも簡単にできま
11 | 3月 | 2009 | PAOLOG
モコモコつうしん スコティッシュフォールド「モコ」の日々の様子を写真と動画で紹介してます。もうメロメロ♡ ねこと赤ちゃんの初めての遭遇 2015.02.23(Mon.)
別ドメインのjsonデータをXMLHttpRequestでやりとりする | バシャログ。
いつのまにやら家から5分の距離に新しくコンビニができたことに気づいたtanakaです。 今日は、別ドメインのjsonデータをXMLHttpRequestで普通に取得するにはどうすればいいか調査したので方法をまとめます。実装としてはもう4年くらい前から使えるようになっていますが、私はまだ使ったことがなかったので。 XMLHttpRequest とクロスドメイン XMLHttpRequest が Internet Explorerに実装され、それ以外のブラウザに実装された当初は JavaScriptが実行されたページのドメイン以外にリクエストを送りデータを受け取ることはできませんでした。別ドメインに非同期でリクエストするためにいくつかの方法が考えられましたが詳しい説明は省略します。(一旦サーバを経由する・Flashを経由する・JSONPを使うなど) 2009年になりXMLHttpRequest
Sencha TouchでのクロスドメインなJSONP通信 - きしだのHatena
12/1に、福岡RubyKaiki01で、ぜんぜんRubyとは関係ないSencha Touchの話をしてきました。そのときに紹介したJSONPのコードについて。 JSONPについては、サーバーの記述も必要なので、本には書いてなかった、というか書かないから調べてなかったので。 Sencha Touchとは？ HTML5+JavaScript+CSS3用のモバイルアプリケーションフレームワークです。HTML5とはいえ、WebKit用なので、Firefoxなどではうまく動きません。 どんな感じかは、次のKitchenSinkをChromeやSafariで見てみてください。 http://cdn.sencha.io/touch/sencha-touch-2.1.0/examples/kitchensink/index.html サンプルのソースを見るとわかりますが、基本的にはHTMLのタグを書くこ
Node.js cloud products and services | Nodejitsu Inc.
Node.js clouds. Simple. Scalable. Enterprise-ready. Limited betaPlatform as a ServiceThe simplest, most reliable and intelligent Node.js hosting platform you can get. Try Nodejitsu for free InternalsPricingGetting Started Enterprise Products & ServicesWe license software that enables public and private Node.js clouds. Our products offer unlimited flexibility to build efficient, smart and scalable
Going Simple with JavaScript
I was making a change to a page that needed to pull from a remote API and make changes to various parts of the page. Sounds like the time to pull out jQuery and Ajax, doesn't it? Instead, I just used old fashioned JavaScript. Actually, I used new fashioned JavaScript. Browsers haven't stood still in the advent of libraries and frameworks. As a result, we can take advantage of those features when w
JavaScriptだけで地図の上にTwitterのつぶやきを表示する：マピオンラボ(Javascript)
Twitter連携という機能を2ヶ月くらい前にリリースしました。 実はこの機能、サーバサイドは一切使わずにJavaScriptだけで実装されています。 田町駅周辺のTwitterのつぶやき Twitter Search APIをJSONPで取得しているだけ これ。 Twitter Search API Method: search 必要なパラメータは以下の通り geocode 緯度経度半径 callback JSONPのために必要 rpp 取得するツイート数。最大100件まで。 検索結果を地図に載せるだけ！ なんだ楽勝じゃん、と思ったらほとんどのツイートに位置情報（ジオタグ）が含まれていないことが判明しましたorz 位置情報は以下のような形で返ってきます。 geo: { type: "Point", coordinates: [35.7011, 139.7708] } ところがほとん
案外簡単なjavascriptのjsonpの仕組み
jsonpを使うと、javascriptで別のWEBサーバのAPIの仕組みを使うことができます。 その仕組みは案外簡単です。 サーバ側で足し算をして、その結果をjavascriptで表示するプログラムを例にして説明します。 サーバ側のjsonpの仕組み サーバ側ではphpのプログラムで２つの引数を得て、足し算をして、 "callback(答え)" という、文字列を出力します。 このphpのプログラムをjsonp_sum.phpとしてサーバにセーブします。 javascript側のjsonpの仕組み javascript側ではjavascriptのソースがjsonp_sum.php?arg1=1&arg2=2にあると記述します。 ブラウザはjsonp_sum.phpを呼び出し、返ってくる文字列をjavascriptのソースと思って実行します。 その文字列は "callback
Twitter発言をjQueryとJSONPで取得して表示してみました│ISC開発者ブログ
先日紹介したＷＥＢサービスで使用されている「jsonp」で取得と表示を簡単に出来ないかな？と思い「Twitter」のＡＰＩを利用してデータを取得しJSONPで表示するものを書きました。 ※ＪＳＯＮＰについては→JSONPとは [html] <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>JSONPでTwitter発言表示してみました</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.6.0");</script> <script ty
TwitterのSearch APIをjQueryとJSONPでゴニョゴニョする方法: JavaScriptメモ
参考:http://dev.twitter.com/doc/get/search ・リクエストURL http://search.twitter.com/search.format フォーマットはjsonとatomが選択可能。 http://search.twitter.com/search.json?q=hogehogeのようにqパラメーターにキーワードを付けてアクセすると検索結果が取得できる。 利用できるオプションパラメータは次の通り。 callback JSONPを利用する際のコールバック関数 lang 言語の名称企画を指定できる。デフォルトのISO 639-1でOK locale jaを指定すると日本語の検索結果を取得できる rpp 1ページに表示する件数を指定できる page 表示するページを指定できる since_id 指定したID移行のツイートを取得できる until ツイー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSONPで受け取れない文字? \u2028 - Qiita