解決跨域問題 cors~ JSONP~
阿新 • • 發佈:2018-11-08
- No 'Access-Control-Allow-Origin'
解析:跨域訪問
當前兩個程式相互訪問時:域名不同;埠不同;協議不同
屬於跨域訪問,ajax預設禁止跨域訪問
以下情況不允許傳送ajax請求:
1. http://www.tedu.com ajax-> http://www.tmooc.cn
2. http://oa.tedu.com ajax-> http://hr.tedu.com
3. http://localhost:3000 ajax-> http://localhost:8000
4. https://baidu.com ajax-> http://baidu.com
443 80
5. http://localhost ajax-> http://127.0.0.1
如何跨域訪問: 2種:
1. JSONP
什麼是:填充式JSON——JSON with Padding
何時: 今後跨域,首選jsonp
如何:
基本思想:用其它可以跨域請求的元素,代替ajax
程式中都是用<script>元素代替ajax傳送請求
方案一:
1. 服務端: 將要返回的資料,填充進一條字串格式的js語句中,組成一條正確的可執行的js語句,再返回
2. 客戶端: 新增<script src="伺服器端地址">
結果: script可跨域請求到伺服器返回的js語句,並在客戶端立刻執行。
問題: 服務端返回的js語句是寫死的,眾口難調。
方案二:
1. 服務端: 返回一條自定義函式的呼叫語句
要求客戶端必須執行指定名稱的函式
2. 客戶端: 提前定義一個與服務端同名的函式
函式有一個引數可接受伺服器端的資料
函式內可執行任意操作
問題: 函式名是寫死的,極容易發生衝突!
方案三:
1. 服務端:接受一個函式名引數
將客戶端發來的函式名引數拼接到js語句的開頭!
2. 客戶端:<script src="地址?引數名=本地函式名"
問題: script是寫死的!只能在頁面載入時請求一次
方案四:
1. 服務端不變
2. 客戶端: 動態建立script元素
script只要被加到頁面上,就立刻自動請求
問題: script不斷累積
解決: 在回撥函式中自動刪除script
其實: $.ajax也支援jsonp
$.ajax({
... ,
dataType:"jsonp",
...
})
強調: dataType:"jsonp"需要伺服器端配合才能實現。
其實,dataType:"jsonp"的原理和方案四一致:
1. 也是通過在head中動態新增<script>傳送請求
2. 也是通過?callback=函式名,傳送函式名到服務端
3. 函式名其實是$.ajax自動為success函式生成的隨機函式名。
2. CORS
在伺服器端新增響應頭: node中:
res.writeHead(200,{
"Content-Type":"application/json;charset=utf-8",
"Access-Control-Allow-Origin":"指定來源域名"|"*"
})