サーバレス練習帳

着眼大局着手小局

Chrome拡張(及びIEのjs)からローカルのWebサーバにXHRを飛ばす大実験

(そんなこと、そもそも可能なんだろうか・・・? まぁ、実験だな。)

【1】
まずは、もの凄い簡易版のLocal Hostを建ててみよう。
qiita.com

no codeでコマンドラインにこれを書くだけ。

$ python -m http.server 8000

簡単に動かすことができました。
これで、http://localhost:8000/にアクセスできます。

【2】
では、次に、Chrome拡張に次のコードを書いて、ローカルにXHRを飛ばしてみます。
飛ぶかな・・・?

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.send();
xhr.onload = ()=> {
  console.log(xhr.response);
};

CORSの制約に引っかかった。

>>No 'Access-Control-Allow-Origin' header is present on the requested resource.<<
ですって。

【3】
Access-Control-Allow-Originを指定できるサーバーをローカルに作る。
では、今度はコチラのページを参考にWebサーバを立ち上げます。
qiita.com

from wsgiref.simple_server import make_server

import json


def app(environ, start_response):
  status = '200 OK'
  headers = [
    ('Content-type', 'application/json; charset=utf-8'),
    ('Access-Control-Allow-Origin', '*'),
  ]
  start_response(status, headers)

  return [json.dumps({'message':'hoge'}).encode("utf-8")]

with make_server('', 3000, app) as httpd:
  print("Serving on port 3000...")
  httpd.serve_forever()

さぁ、これで作ったhttp://localhost:3000/にアクセスできるかな・・・?
(今度は3000番にした)

・・・アクセスできたわ!できるんだ!