Web笔记-使用jsonp解决跨域请求（CROS）问题
生活随笔
收集整理的這篇文章主要介紹了
Web笔记-使用jsonp解决跨域请求（CROS）问题
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
?
?
基本概念
代碼與實例
?
基本概念
當我在某web站點，這個站點里面發(fā)出了像其他站點的請求（不同鏈接，或者同一鏈接的不同端口），是會失敗的，因為是瀏覽器的安全檢測問題，當然，這個只是主流瀏覽器的功能，如果開發(fā)者自己開發(fā)的瀏覽器那么CROS就看開發(fā)者自己怎么處理了，這里以Chorm瀏覽器為例。
這里安裝插件，允許跨站即可：
Allow-Control-Allow-Origin: *這樣就可以解決跨域的問題，但是還有一種方式，那就是jsonp，這個主要是在script中，發(fā)起請求，這樣瀏覽器是不會連接的（百度的搜索引擎下拉關鍵字，QQ英語等都是用了這樣的技術），下面來演示下。
?
代碼與實例
這里這C/C++里面的回調(diào)差不多。寫一個URL，指定一個函數(shù)，即可進行回調(diào)，如下代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title> </head><body><script>function getData(data){console.log(data);}var script = document.createElement("script");//script.id = 'jsonp';script.src = './jsonp.js';document.body.appendChild(script);</script> </body></html>這里來看看jsonp.js文件：
getData({name: '呵呵噠',value1: '呵呵' })程序運行截圖如下：
下面是百度的下拉框首先來分析下：
這里的wd就是只就是瀏覽器輸入的，看看里面的內(nèi)容：
看看源碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> </head><body><input type="text" /><ul></ul><script>function getData(data){console.log(data);var script = document.querySelector('#jsonp');$('ul').html('');for(var i = 0; i < data.g.length; i++){$('<li>' + data.g[i].q + '</li>').appendTo('ul');}}function getList(wd){var script = document.createElement("script");script.id = 'jsonp';script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1430,21123,29523,29721,29567,29220&req=2&csor=5&pwd=123&cb=getData&wd=' + wd;document.body.appendChild(script);}$('input').keyup(function(){var wd = $(this).val();getList(wd);})</script> </body></html>這里cb指向自己的函數(shù)，到時候就會調(diào)用！
程序運行截圖如下：
?
總結(jié)
以上是生活随笔為你收集整理的Web笔记-使用jsonp解决跨域请求（CROS）问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QML笔记-键盘事件中同时响应onDig
- 下一篇： HTTP协议方法及状态码（HTTP协议入