繞不過的就突破

參考文檔

　　 JSONP/ 跨域/ CORS

一、跨域

　　同源策略，IE有例外 eg 端口不做爲是否同源的條件

　　　　沒有同源策略的接口請求和DOM查詢

　　正確姿式

　　JSONP　

　　　　JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據　

　　　　HTML標籤裏，一些標籤好比script、img這樣的獲取資源的標籤是沒有跨域限制

　　　　　　服務端收到url後回調前端定義的方法

　　　　　　post方法經過js構造iframe form表單提交模擬

　　CORS W3C標準　　cross-origin resource sharing（IE瀏覽器不能低於IE10）

　　　　請求頭origin 不準可的話 --> 瀏覽器看響應頭是否包含 Access-Control-Allow-Origin字段

　　　　　　若是要發送Cookie， Access-Control-Allow-Origin就不能設爲星號

　　　　　　

　　　　　　預檢preflight

　　　　　　　　request

　　　　　　　　　　origin

　　　　　　　　　　Access-Control-Request-Headers

　　　　　　　　　　Access-Control-Request-Method

　　　　　　　　response

　　　　　　　　　 Access-Control-Allow-Origin: *　　　　　

　　　　　　　　　　　　
 Access-Control-Allow-Methods: GET, POST, PUT (必須）

　　　　　　　　　Access-Control-Allow-Headers: X-Custom-Header （requestHeader有）

　　　　　　　　　Access-Control-Allow-Credentials: true

　　　　　　　　　Access-Control-Max-Age: 1728000

 

　　　　簡單請求：同時知足一、2     (瀏覽器自動增長請求頭origin)

　　　　（

　　　　　　一、HEAD GET POST

　　　　　　二、HTTP的頭信息不超出如下幾種字段：

　　　　　　　　Accept、Accept-Language、Content-Language、Last-Event-ID

• 　　　　　　　　Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

　　　　 ）

　　　　　　 // *時cookie不會在http請求中帶上

 　　　　ctx.set('Access-Control-Allow-Origin', '*')

　　　　複雜請求

　　　　　　非簡單請求會發出一次預檢測請求，返回碼是204，預檢測經過纔會真正發出請求，這才返回200。

　　nginx轉發

　　　　location是NginxHttpCoreModule的重要指令，爲匹配的URI進行配置

　　　　　　字符串、正則（須指定前綴） = ~ ~* !~ !~*

　　　　　　　　精確

　　　　　　　　不精確匹配

　　　　　　　　　　區分大小寫

　　　　　　　　不匹配

 

　　DOM查詢

　　 1.postMessage
　　　　window.postMessage() 是HTML5的一個接口，專一實現不一樣窗口不一樣頁面的跨域通信。

　　二、 document.domain
　　　　這種方式只適合主域名相同，但子域名不一樣的iframe跨域。
　　　　好比主域名是 http://crossdomain.com:9099，子域名是 http://child.crossdomain.com:9099，

　　　　這種狀況下給兩個頁面指定一下document.domain即document.domain = crossdomain.com就能夠訪問各自的window對象了。

　　 3.canvas操做圖片的跨域問題  回家趕忙找出 《css世界》讀讀　　

 

ps

　　www.baidu.com

　　主機名+DNS域名+一個點（.）

　　www是主機名也是默認的主機域名

　　一級(頂級)、二級、子域名

　　最右邊.com是頂級域名（一級域名），其餘 .cn,.net，.org，.gov，.edu，.tv

　　.com.cn　　.com是.cn下的二級域名

　　任何人都註冊.com域名

　　image.baidu.com　　image是子域名