資訊專欄INFORMATION COLUMN
摘要：三原因分析瀏覽器在加載可以跨域資源時(shí)，在將資源載入頁(yè)面時(shí)對(duì)其進(jìn)行識(shí)別與攔截等一系列處理。從而禁用了客戶端瀏覽器的類型嗅探行為即把不可執(zhí)行的類型轉(zhuǎn)變?yōu)榭蓤?zhí)行的類型。
一、jsonp的使用
jsonp是實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù)的一種方式，解決了由于瀏覽器同源策略帶來的安全限制；雖然瀏覽器有同源策略的限制，但對(duì)于一些特殊的dom元素卻可引用非同源資源，例如 等，下面結(jié)合例子說明：
jquery直接發(fā)起ajax調(diào)用
服務(wù)端代碼
@RequestMapping(value = "/load/data")
public void loadData2(@RequestParam("callback") String callback,
HttpServletResponse response) throws IOException {
Map data = new HashMap<>();
data.put("name", "xudj");
data.put("age", "18");
// 轉(zhuǎn)json
String jsonData = JSON.toJSONString(data);
//用回調(diào)函數(shù)名稱包裹返回?cái)?shù)據(jù)
String result = callback + "(" + jsonData + ")";
response.getWriter().write(result);
}
客戶端代碼
跨域測(cè)試
調(diào)用結(jié)果
如上，當(dāng)在localhost:9090站點(diǎn)訪問localhost:8080的接口資源時(shí)，出現(xiàn)跨域錯(cuò)誤。
如錯(cuò)誤提示，可在服務(wù)器端代碼中設(shè)置響應(yīng)頭“Access-Control-Allow-Origin”實(shí)現(xiàn)允許跨域
script解決跨域問題
服務(wù)端代碼
如上不變
客戶端代碼
script解決跨域
");
});
});
調(diào)用結(jié)果
jsonp解決跨域
服務(wù)端代碼
如上不變
客戶端代碼
jsonp解決跨域
調(diào)用結(jié)果
通過指定ajax的dataType為“jsonp”，jsonp指定服務(wù)端返回jsonp格式數(shù)據(jù)；請(qǐng)求會(huì)自動(dòng)帶上參數(shù)callback=?二、CORB問題的由來
當(dāng)服務(wù)端代碼中添加安全響應(yīng)頭時(shí)：
服務(wù)端代碼
@RequestMapping(value = "/load/data")
public void loadData2(@RequestParam("callback") String callback,
HttpServletResponse response) throws IOException {
// 安全響應(yīng)頭
response.addHeader("X-Content-Type-Options", "nosniff");
response.setContentType("text/html;charset=UTF-8");
Map data = new HashMap<>();
data.put("name", "xudj");
data.put("age", "18");
// 轉(zhuǎn)json
String jsonData = JSON.toJSONString(data);
//用回調(diào)函數(shù)名稱包裹返回?cái)?shù)據(jù)
String result = callback + "(" + jsonData + ")";
response.getWriter().write(result);
}
如上所示，代碼中多出
// 安全響應(yīng)頭
response.addHeader("X-Content-Type-Options", "nosniff");
response.setContentType("text/html;charset=UTF-8");
導(dǎo)致使用jsonp解決跨域的請(qǐng)求出現(xiàn)如下錯(cuò)誤：
如上，如果服務(wù)端代碼沒有指定ContentType時(shí)，則出現(xiàn)如下錯(cuò)誤：
以上均是由response.addHeader("X-Content-Type-Options", "nosniff");導(dǎo)致的瀏覽器執(zhí)行script時(shí)通過對(duì)MIME類型檢測(cè)過濾掉不安全的文件或請(qǐng)求。
CORB（Cross-Origin Read Blocking）：瀏覽器在加載可以跨域資源時(shí)，在將資源載入頁(yè)面時(shí)對(duì)其進(jìn)行識(shí)別與攔截等一系列處理。 X-Content-Type-Options(:nosniff)：相當(dāng)于一個(gè)提示標(biāo)志，被服務(wù)器用來提示客戶端須遵循在Content-Type首部中對(duì)MIME類型的設(shè)定，不能對(duì)其進(jìn)行修改。 從而禁用了客戶端（瀏覽器）的MIME類型嗅探行為（即把不可執(zhí)行的MIME類型轉(zhuǎn)變?yōu)榭蓤?zhí)行的MIME類型）。指定值為nosniff時(shí)，會(huì)拒絕以下兩種請(qǐng)求：
請(qǐng)求類型：style，MIME類型不是“text/css”
請(qǐng)求類型：script，MIME類型不是“Javascript類型”，Javascript類型有text/javascript、application/javascript、application/x-javascript等
所以，當(dāng)服務(wù)端出現(xiàn)response.addHeader("X-Content-Type-Options", "nosniff");安全相應(yīng)頭，且未指定Content-Type為Javascript類型類型時(shí)，jsonp請(qǐng)求跨域資源時(shí)變出現(xiàn)如上CORB或拒絕解析的問題。
四、解決辦法根據(jù)第三步問題原因的分析中可知，修改方法有如下兩種：
去除服務(wù)端response.addHeader("X-Content-Type-Options", "nosniff");的配置，但可能造成一些安全上的問題，筆者這里不做擴(kuò)展，有興趣的同學(xué)可以留言討論
服務(wù)指定Content-Type為Javascript類型的一種即可
啟用jsonp，將跨域的數(shù)據(jù)請(qǐng)求轉(zhuǎn)到本站服務(wù)器，由本站服務(wù)器去做跨域請(qǐng)求，即跳過瀏覽器同源策略的限制
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/73454.html
摘要：騰訊地圖和的誤會(huì)最近業(yè)務(wù)開發(fā)中，涉及到了騰訊地圖跨域。這個(gè)需要騰訊地圖的，就會(huì)這里遇到的問題之后就是拿著省份，去請(qǐng)求后端的接口，獲取該省份對(duì)應(yīng)的門店啦。調(diào)用騰訊地圖需要跨域這個(gè)很好理解。詳細(xì)的可以看這大哥的文章簡(jiǎn)單說會(huì)顯示資源的獲取。 騰訊地圖WebService API 和 CORB的誤會(huì) 最近業(yè)務(wù)開發(fā)中，涉及到了騰訊地圖API 、 跨域 、 CORB。雖然最后的結(jié)果方法很簡(jiǎn)單， 但...
摘要：類似這樣而在客戶端我們只需要定義一個(gè)預(yù)定好的回調(diào)函數(shù)即可。處理跨域請(qǐng)求得到的數(shù)據(jù)其中的是我們?cè)诳蛻舳硕x好的在數(shù)據(jù)請(qǐng)求成功后要執(zhí)行的回調(diào)函數(shù)。 跨域產(chǎn)生的原因 跨域是由瀏覽器的同源策略引起的，即不同源（協(xié)議,域名,端口中其中有一個(gè)不同）的js是不能讀取對(duì)方的資源的。當(dāng)要網(wǎng)站中的js要請(qǐng)求其他網(wǎng)站的數(shù)據(jù)時(shí)就會(huì)產(chǎn)生跨域問題，就像下面這樣，瀏覽器會(huì)報(bào)錯(cuò)。 showImg(https://se...
摘要：跨域原因同源策略在客戶端編程語(yǔ)言中，如和，同源策略是一個(gè)很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略規(guī)定跨域之間的腳本是隔離的，一個(gè)域的腳本不能訪問和操作另外一個(gè)域的絕大部分屬性和方法。由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)。 1.JavaScript跨域原因--同源策略 在客戶端編程語(yǔ)言中，如javascript和 ActionScript，同源策略是一個(gè)很重要的安全理...
摘要：三哪些會(huì)受到同源策略限制對(duì)于瀏覽器來說，除了會(huì)受到同源策略的限制外，瀏覽器加載的一些第三方插件也有各自的同源策略。九的現(xiàn)代瀏覽器允許腳本直連一個(gè)地址而不管同源策略。 一、Origin（源） 源由下面三個(gè)部分組成： 域名 端口 協(xié)議 兩個(gè) URL ，只有這三個(gè)都相同的情況下，才可以稱為同源。 下來就以 http://www.example.com/page.html 這個(gè)鏈接來比較說...
閱讀 1845·2021-11-23 09:51
閱讀 1303·2021-11-18 10:02
閱讀 974·2021-10-25 09:44
閱讀 2114·2019-08-26 18:36
閱讀 1634·2019-08-26 12:17
閱讀 1158·2019-08-26 11:59
閱讀 2755·2019-08-23 15:56
閱讀 3367·2019-08-23 15:05
