如何使用yql實現跨域訪問

應用場景

• 調用百度的某個API, 例如:https://openapi.baidu.com/api
• 返回結果是:{"id":123,"name":"test"}
• 用$.ajax直接調用的話, 會提示

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

• 若是返回結果是var obj={"id":123,"name":"test"}; 只須要jsonp就能解決這問題, 但接口是不可能變的,

這種狀況下, 如何解決這類問題

雅虎的Yahoo Query Language (YQL)經過它能夠把 Web 上的各類數據服務做爲數據庫表來查詢，並得到結果。

經過yql服務, 能夠把https://openapi.baidu.com/api的內容再次封裝, 還能夠把接口返回的內容, 再次使用sql語句查詢, 而後再經過yql服務返回最終結果

• 具體使用方法:
• 打開網址https://developer.yahoo.com/yql/
• 找到示例, 把默認的示例替換成你本身的: select * from html where url='你要訪問的api地址'
• 而後點擊Test, 就能看到Response裏面已經有查詢結果了
• 還能夠定製查詢select id,name from html where url='你要訪問的api地址', 定製返回結果
• 最後複製Endpoint裏面的連接大概是這樣https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20urlles.org%2Falltableswithkeys
• 最後, 把獲得的連接地址複製到本身的js裏面去執行就能正確拿到json

例

$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20urlles.org%2Falltableswithkeys", function (data) {
    console.log(data);
});

 

到這就結束了, 已經能在控制檯輸出結果了

---

這個解決方案很差的一點就是又經過了一次yql, 等因而yql先拿到結果, 而後又到瀏覽器, 中轉了一次, 好的一點是不用本身再去動服務器代碼

 

 

 

友情贊助

若是您喜歡此文，感受對您工做有幫助，預期領導會給您漲工資，不妨小額贊助一下，讓我有動力繼續努力。

贊助方式：打開支付寶App，使用「掃一掃」付款，付款碼見下圖，別忘了付款留言哦！

或使用微信, 不用加好友就能付款