[TOC] ## JSONP 網頁通過添加一個`<script>`元素，向服務器請求 JSON 數據，這種做法不受同源政策限制 ``` function addScriptTag(src) { var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag('http://example.com/ip?callback=foo'); } function foo(data) { console.log('Your public IP address is: ' + data.ip); }; ``` ## CORS 通信 CORS 請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。 簡單請求 1. 請求方法 * HEAD * GET * POST 2. http 頭信息 * Accept * Accept-Language * Content-Language * Last-Event-ID * Content-Type：只限于三個值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain` 凡是不同時滿足上面兩個條件，就屬于非簡單請求 ### Access-Control- 開頭 #### Access-Control-Allow-Origin 愿意接受的域名 必填字段 ##### Access-Control-Allow-Credentials cookie 是否包含在請求中 布爾值 默認為`false` 只有需要發送cookie 時,在設置`true` 需要同時 開啟`withCredentials` ``` var xhr = new XMLHttpRequest(); xhr.withCredentials = true; ``` #### Access-Control-Expose-Headers 該字段可選。CORS 請求時，`XMLHttpRequest`對象的`getResponseHeader()`方法只能拿到6個服務器返回的基本字段：`Cache-Control`、`Content-Language`、`Content-Type`、`Expires`、`Last-Modified`、`Pragma`。如果想拿到其他字段，就必須在`Access-Control-Expose-Headers`里面指定。上面的例子指定，`getResponseHeader('FooBar')`可以返回`FooBar`字段的值。