資訊專欄INFORMATION COLUMN
摘要：也就是說，一般情況下瀏覽器向服務(wù)器發(fā)送請求得到的都是數(shù)據(jù)文本，，，但是當(dāng)采用技術(shù)時候，瀏覽器向跨域服務(wù)器發(fā)送請求，得到的是回調(diào)函數(shù)包住的。
問題：跨域有哪些方法？jsonp的原理是什么？
jsonp：
先說jsonp，jsonp的主要原理是利用script標(biāo)簽的src可以跨域請求，據(jù)說有src屬性的都可以跨域請求，但script標(biāo)簽返回的會直接執(zhí)行，所以都是用script請求。jsonp=json+padding，padding是指服務(wù)器返回數(shù)據(jù)時把數(shù)據(jù)用padding（函數(shù)）包裹了起來。也就是說，一般情況下瀏覽器向服務(wù)器發(fā)送請求得到的都是數(shù)據(jù)（文本，XML，JSON），但是當(dāng)采用JSONP技術(shù)時候，瀏覽器向跨域服務(wù)器發(fā)送請求，得到的是回調(diào)函數(shù)包住的JSON。此處JSON作為參數(shù)傳入回調(diào)函數(shù)，然后再返回給瀏覽器。
這里寫一個例子：其中后臺用的nodejs
前端代碼：index.html
后臺代碼：server.js
var http = require(http) var url = require(url) http.createServer(function(req,res){ var param = url.parse(req.url, true).query var callback = param.callback var data = { text: "hello world" } var resStr = callback+"("+JSON.stringify(data)+")" res.write(resStr) res.end() }).listen(3000)
上面的例子中，index.html中定義了一個jsonpcallback函數(shù)，并且把這個函數(shù)名通作為callback字段的值以get的請求（src的請求只能是get）發(fā)送給服務(wù)端。服務(wù)端接收到之后通過callback字段拿到回調(diào)函數(shù)名，然后用這個函數(shù)名包裹要返回的數(shù)據(jù)，形成一個字符串，發(fā)給前端
例子在node環(huán)境下運行：node server.js，然后再運行index.html就可以看到前端跨域請求的結(jié)果。例子中由于index.html是本地的，所以跟服務(wù)器不同源，普通的請求會被拒絕。
服務(wù)端寫的時候要注意，返回的是一個很像函數(shù)調(diào)用的字符串，它不并不是后臺對callback函數(shù)的調(diào)用，所以要把返回的對象用JSON.stringify轉(zhuǎn)化一下，再加上字符串的兩個括號
CORS：
jsonp說完之后，再說一個常用的跨域方法CORS。主要參考阮一峰大神的資料：http://www.ruanyifeng.com/blog/2016/04/cors.html
CORS分簡單請求和非簡單請求，同時滿足下面兩個條件的就是簡單請求，否則就是非簡單請求
簡單請求：請求頭通過Origin字段用來說明，本次請求來自哪個源（協(xié)議 + 域名 + 端口）。服務(wù)器根據(jù)這個值，決定是否同意這次請求。
我在實際測試時先不使用關(guān)于cookie的一些可選字段，就簡單的在前端設(shè)置Origin在后端設(shè)置Access-Control-Allow-Origin這種必須的字段來測試。
發(fā)現(xiàn)前端的ajax設(shè)置Origin字段會報錯-》Refused to set unsafe header "Origin"
雖然不影響請求的發(fā)送，但設(shè)置的Origin字段是無效的，不管我設(shè)置什么或者不設(shè)置這個字段時查看Origin字段時它的值都是null，網(wǎng)上查了之后在stackoverflow上有人說那個Origin字段本來就應(yīng)該是瀏覽器來設(shè)置的，自己設(shè)置不安全。
猜想只要瀏覽器發(fā)現(xiàn)請求的目標(biāo)不是同源的，就會自己給報文加Origin字段。所以只要在后端設(shè)置Access-Control-Allow-Origin字段為*（表示接受任意Origin的請求）就可以了。
前端代碼：簡單的ajax即可
服務(wù)端代碼：server.js
var http = require(http) http.createServer(function(req,res){ res.writeHead(200, { Access-Control-Allow-Origin : * }); res.write("hello world!") res.end() }).listen(3000)
非簡單請求：除去可選字段，在非簡單請求中服務(wù)端還要指定Access-Control-Request-Method來表示自己接受的請求的方法，把之前的ajax中的方法從get改為put
前端代碼：index.html
如果后臺沒有在Access-Control-Request-Method中添加put方法就會報錯-》Failed to load http://localhost:3000/: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
后端代碼：server.js
var http = require(http)
var url = require(url)
http.createServer(function(req,res){
res.writeHead(200, {
Access-Control-Allow-Origin : *,
Access-Control-Allow-Methods : GET, POST, PUT
});
res.write("hello world!")
res.end()
}).listen(3000)
添加了Access-Control-Request-Method：“PUT”后請求成功。
非簡單方法瀏覽器會先發(fā)起一個method為OPTION的“預(yù)檢”來跟服務(wù)器驗證自己的請求是不是被允許，如果服務(wù)器回的頭中沒有請求的方法或者參數(shù)，那么瀏覽器就知道不允許，將不發(fā)送ajax請求。如果有，瀏覽器才會再發(fā)送那個ajax請求。
“預(yù)檢”請求：
CORS和jsonp的區(qū)別主要在于：jsonp只支持get請求，而CORS支持所有類型的請求，只不過CORS要求至少IE10，jsonp兼容以前的版本。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2193.html
摘要：跨域?qū)嵲谑敲嬖嚬僖粋€人的利器。首先，什么是是一個標(biāo)準(zhǔn)，全稱是跨域資源共享。它的值是一個布爾值，表示是否允許發(fā)送。設(shè)為，即表示服務(wù)器明確許可，可以包含在請求中，一起發(fā)給服務(wù)器。 面試問到數(shù)據(jù)交互的時候，經(jīng)常會問跨域如何處理。大部分人都會回答JSONP，然后面試官緊接著就會問：JSONP缺點是什么??？這個時候坑就來了，如果面試者說它支持GET方式，然后面試官就會追問，那如果POST方式發(fā)送...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6183·2021-11-29 11:00
