這次剛好要使用到cross-domain request,在這邊記錄一下不同的方法。
大家都知道,因為same origin policy的關係,不能跨網域送request
jsonp
jsonp就是解決這個問題的一個方法,雖然request不能跨網域,不過img,script這些倒是可以,所以jsonp就是透過新增script到head裡,src指向送出的url,借此達成cross domain request
使用方法
- http method只能用
GET
- 在變數裡加上
callback
變數
http://example.com/users/123?callback=exec
這行GET可以解釋為 取得id為123的user資料,並用exec把資料包起來。
所以回傳就像是這樣
exec({
"id": 123,
"name": "wwwy3y3"
})
而這段就會在 新增的script中執行
cors
Cross-Origin Resource Sharing(CORS) 跨網域資源分享,就是另一種方法了,這個方法被稱為是modern jsonp,是新的規範。
跟jsonp比較之下
- HTTP Method: jsonp只能用
GET
一種方法,cors 支援其他的http method - 瀏覽器支援: jsonp可以在老舊的瀏覽器運作,但CORS在比較舊版的瀏覽器就不行,所以使用cors可能要以jsonp當fallback
- 後端支援: jsonp比起cors需要寫header,來的單純
瀏覽器支援程度
(from whencaiuse#cors)
使用方法
透過header之間的傳遞,判斷此網域是否為許可的網域
送出的request header中會有origin
Origin: http://foo.example
表示送出request的網域
而回傳的respond header會包含Access-Control-Allow-Origin
Access-Control-Allow-Origin: http://foo.example
如果Access-Control-Allow-Origin
不包含foo.example
則此request就不會被允許。
preflight
如果request不是GET或POST,preflight request
就會先以OPTION
method送出,確認request是否可以送出。
risk
特別需要注意的是這兩種方法都要注意csrf攻擊
http://erlend.oftedal.no/blog/?blogid=130
nodejs & express
express中有支援jsonp的api,使用上十分簡單
if(req.query.callback)
res.jsonp(datas);
else
res.json(datas);
只需要簡單判斷是否有callback
變數即可。
而cors的部份npm也有module支援。