JSONP跨域請求的理解（程式碼範例）

這篇文章帶給大家的內容是關於JSONP跨域請求的理解（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

對於JSONP一直是知半解，今天利用周末整理了一下

維基百科的解釋：

JSONP (JSON with Padding or JSON-P[ 1]) is a javascript pattern to request data by loading a tag. It was proposed by Bob Ippolito in 2005.[2] JSONP enables sharing of data bypassing same-origin policy. The policy disallows running JavaScript to read media DOM elements or XHR data fetched from outside the page's origin. The aggregation of the site's scheme, port number and host name identifies as its origin.

我的理解是：

1、前端寫自己的函數，用script標籤發送get請求把函數名字帶上 2、伺服器端接送到請求後來取得前端發送請求時的query，加入自己的資料回傳後。 3.、前端取得傳回的內容其實就自己的函數呼叫實參是資料物件。

解釋的有點懵逼沒關係，用栗子說話。

前端程式碼

Document //编写调用函数 function getremotedata(data) { console.log(data); } 後端程式碼

//用node编写一个简单的服务器 const http = require('http'); const urlModule = require('url'); const server = http.createServer(); server.on('request', function (req, res) { //urlModule.parse(req.url.url)的请求 就是这个对象 // { // protocol: null, // slashes: null, // auth: null, // host: null, // port: null, // hostname: null, // hash: null, // search: '?callback=getremotedata', // query: 'callback=getremotedata', // pathname: '/', // path: '/?callback=getremotedata', // href: '/?callback=getremotedata' } // 对象结构赋值得到query是一个对象 const {pathname: url, query} = urlModule.parse(req.url, true) if (url === '/') { var data = { name: '大毛', age: 18, gender: '未知' }; // 解析query的请求得到前端发送的函数名称，加上括号调用此函数，函数里加实参servedata返回 var scripteStr = `${query.callback}(${JSON.stringify(data)})` console.log(scripteStr) res.end(scripteStr) } else { res.end('404') } }); server.listen('3999', function () { console.log('server is running 3999') }) 這樣前端發送請求，無論回調是什麼，後端都會回傳回調加data數據，就實現了跨域請求啦。

第一寫感覺有點語言不清，大家把程式碼自己敲一遍就懂了

自學前端3個月，想找一個基礎的前端工作