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