jsonp跨域簡單實現
阿新 • • 發佈：2020-08-13
同源策略
基於安全的考慮，現如今瀏覽器中都引入了同源策略。所說的同源就是協議、域名、埠這三個都相同
例如：對於http://www.example.com/a.js。協議是http，域名是www.example.com，埠預設為80
http://www.example.com/b.js 同源
http://www.example.com:8080/a.js 不同源
http://www.example123.com/a.js 不同源
https://www.example.com/a.js 不同源
受同源策略的限制，對於非同源之間是不能傳送AJAX請求的
建立檔案a.js，在其中任意編寫一些內容
var a = 'jsonp'
在同一目錄下建立檔案index.js，用node開啟一個伺服器
var http = require('http') var fs = require('fs') var server = http.createServer() server.on('request', function (req, res) { if (req.url === '/a.js') { fs.readFile('./a.js', 'utf-8', function (err, data) { if (err) { res.end(err) }else { res.end(data) } }) } }) server.listen(3000, function () { console.log('3000 port is open') })
建立檔案index.html，發起AJAX請求，訪問伺服器中的檔案a.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> </head> <body> <script> var xhr = new XMLHttpRequest() xhr.open('get', 'http://127.0.0.1:3000/a.js') xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) {
// 將響應的結果輸出到控制檯 console.log(xhr.responseText) } } xhr.send() </script> </body> </html>
從控制檯的輸出可以看到AJAX請求不能跨域
Jsonp的簡單實現
解決跨域訪問的方法有很多，Jsonp就是其中一種。它是藉助script標籤能跨域載入資料的特性來實現的
對之前的檔案index.js做一些修改，通過解析url來獲得url中攜帶的引數
var http = require('http') var fs = require('fs') var url = require('url') var server = http.createServer() server.on('request', function (req, res) {
url = url.parse(req.url, true) if (url.pathname === '/a.js') { fs.readFile('./a.js', 'utf-8', function (err, data) { if (err) { res.end(err) } else { res.end(url.query.callback + '(' + JSON.stringify(data) + ')') } }) } }) server.listen(3000, function () { console.log('3000 port is open') })
建立檔案jsonp.html，藉助script標籤訪問伺服器所在的檔案a.js
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> <script> function fun (data) { console.log(data) } var s = document.createElement('script') var url = 'http://127.0.0.1:3000/a.js?callback=fun' s.setAttribute('src', url) document.getElementsByTagName('head')[0].appendChild(s) </script> </head>
<body>
</body> </html>
檢視控制檯輸出，成功訪問到了a.js中的資料，jsonp跨域成功
jsonp優缺點
優點：不受同源策略的限制，相容性也很好
缺點：它只支援get請求而不支援post等其它型別的請求