一文讀懂JSONP原理

Leck1e 發布于2019-08-23 17:19 / 2174人閱讀

摘要：端口，協議，域名，有一者不同就會出現跨域的問題。解決跨域的方式怎樣解決跨域所謂的解決跨域問題就是前端在合適的時期動態添加一個標簽，請求后端給的接口帶上一個回調函數。因為標簽不受瀏覽器同源策略的限制。

跨域

為什么會出現跨域？

因為瀏覽器有同源策略的限制，同源策略是瀏覽器最核心最基礎的安全策略。

端口，協議，域名，有一者不同就會出現跨域的問題。

解決跨域的方式

JSONP

CORS

JSONP怎樣解決跨域？

所謂的JSONP解決跨域問題就是前端在合適的時期動態添加一個

2.在合適的階段通過

后端

開啟一個接口服務

var express = require("express");

var app = express();

app.get("/",function(req,res,next){
    res.end("ok")
})

app.listen(3000,function(){
    
    console.log("JSONP")
    
})

2.等前端請求接口的時候，獲取請求的參數的回調

app.get("/",function(req,res,next){
    
    var callback = req.query.callback;
    
})

3.最后后端把所需的數據放到獲取到的回調函數參數內，返回給前端（返回的是字符串），瀏覽器會把它解析為js執行

app.get("/",function(req,res,next){
    
    var callback = req.query.callback;
    //模擬所需的數據
    var data = {
                err_ok:0,
                message:"請求成功",
                data:{
                    name:"july",
                    age:21
                }
            }
                
    res.end(`${callback}(${JSON.stringify(data)})`)
    
})

最終后端代碼

var express = require("express");

var app = express();

app.get("/",function(req,res,next){
    
    var callback = req.query.callback;
    //模擬所需的數據
    var data = {
                err_ok:0,
                message:"請求成功",
                data:{
                    name:"july",
                    age:21
                }
            }
                
    res.end(`${callback}(${JSON.stringify(data)})`)
    
})

app.listen(3000,function(){
    
    console.log("JSONP")
    
})

最終前端的代碼

前端接收到的結果

JSONP原理就是這里簡單

--end--

GPU云服務器云服務器讀懂sql 零基礎讀懂云計算 JSONP jsonp：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104162.html

前端基礎匯總

摘要：及相關問題數據類型函數中指向原型作用域閉包面向對象對象創建模式繼承嚴格模式與對象轉換的方法添加屬性，根據原型創建區別新特性解構賦值簡化對象寫法剪頭函數三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區別淺拷貝的幾種方法實現 js及es相關問題數據類型函數中this指向——————原型作用域閉包——————面向對象對象創建模式繼承——————Es5嚴格模式Json與j...

2json 2019-08-23 16:58 評論0 收藏0
前端基礎匯總

摘要：及相關問題數據類型函數中指向原型作用域閉包面向對象對象創建模式繼承嚴格模式與對象轉換的方法添加屬性，根據原型創建區別新特性解構賦值簡化對象寫法剪頭函數三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區別淺拷貝的幾種方法實現 js及es相關問題數據類型函數中this指向——————原型作用域閉包——————面向對象對象創建模式繼承——————Es5嚴格模式Json與j...

laznrbfe 2019-08-29 18:38 評論0 收藏0
一文讀懂鏈路追蹤

摘要：鏈路追蹤鏈路追蹤一詞是在年提出的，當時谷歌發布了一篇論文，介紹了谷歌自研的分布式鏈路追蹤的實現原理，還介紹了他們是怎么低成本實現對應用透明的。感興趣的同學可以去深入了解一下鏈路追蹤，希望本文對你有所幫助。 showImg(https://upload-images.jianshu.io/upload_images/13711841-f54b415cc8d07fdc?imageMogr2...

JerryWangSAP 2019-07-31 10:31 評論0 收藏0
一文讀懂鏈路追蹤

摘要：鏈路追蹤鏈路追蹤一詞是在年提出的，當時谷歌發布了一篇論文，介紹了谷歌自研的分布式鏈路追蹤的實現原理，還介紹了他們是怎么低成本實現對應用透明的。感興趣的同學可以去深入了解一下鏈路追蹤，希望本文對你有所幫助。 showImg(https://upload-images.jianshu.io/upload_images/13711841-f54b415cc8d07fdc?imageMogr2...

imtianx 2019-07-01 13:57 評論0 收藏0
一文讀懂鏈路追蹤

摘要：鏈路追蹤鏈路追蹤一詞是在年提出的，當時谷歌發布了一篇論文，介紹了谷歌自研的分布式鏈路追蹤的實現原理，還介紹了他們是怎么低成本實現對應用透明的。感興趣的同學可以去深入了解一下鏈路追蹤，希望本文對你有所幫助。 showImg(https://upload-images.jianshu.io/upload_images/13711841-f54b415cc8d07fdc?imageMogr2...

JerryZou 2019-08-16 17:58 評論0 收藏0