怎麼配置跨域json
Ⅰ 如何實現跨域jsonp實現原理
JSONP的最基本的原理是：動態添加一個<script>標簽，而script標簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。
這樣其實"jQuery AJAX跨域問題"就成了個偽命題，jquery $.ajax方法名有誤導人之嫌。
如果設為dataType: 'jsonp'，這個$.ajax方法就和ajax XmlHttpRequest沒什麼關系了，枝攔取而代之的則是JSONP協議。JSONP是一個非官方的協議，它允許在伺服器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問。
JSONP即JSON with Padding。由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、埠）的資源。如果要進行跨域請求， 我們可以通陪乎過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象。 這種跨域的通訊方式稱為JSONP。
jsonCallback 函數jsonp1236827957501(....)：是瀏覽器客戶端注冊的，獲取跨域伺服器上的json數據後，回調的函數
Jsonp的執行過程如下：
首先在客戶端注冊一個callback (如:'jsoncallback'), 然後把callback的名字(如:jsonp1236827957501)傳給伺服器。注意：服務端得到callback的數值後，要用jsonp1236827957501(......)把將要輸出的json內容包括起來，此時，伺服器生成 json 數據才能被客戶端正確接收。
然後以 javascript 語法的方式，生成一個function， function 名字就是傳遞上來的參數 'jsoncallback'的值 jsonp1236827957501 .
最後將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標簽，並執行返回的 javascript 文檔，此時javascript文檔數據，作為參數， 傳入到了客戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))里。
可以說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空間就是大量採用蘆搭悉這種方式來實現跨域數據交換的)。JSONP是一種腳本注入(Script Injection)行為，所以有一定的安全隱患。
那jquery為什麼不支持post方式跨域呢？
雖然採用post+動態生成iframe是可以達到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)，但這樣做是一個比較極端的方式，不建議採用。
也可以說get方式的跨域是合法的，post方式從安全形度上，被認為是不合法的，萬不得已還是不要劍走偏鋒。
client端跨域訪問的需求看來也引起w3c的注意了，看資料說html5 WebSocket標准支持跨域的數據交換，應該也是一個將來可選的跨域數據交換的解決方案。
Ⅱ 如何可以跨域訪問靜態json文件呢
直接訪問地址唄,http://host/jsondata/id.json,和請求js,css,圖片的道理是一樣的,
直接訪問出錯的話:
對方禁止跨域請求該文件,即禁止下載
url的映射路徑方式被重寫,比如:地址規格可能為http://host/data/json/id
Ⅲ 如何使用jsonp解決跨域問題
由 於此前很少寫前端的代碼(哈哈，不合格的程序員啊)，最近項目中用到json作為系統間交互的手段，自然就伴隨著眾多ajax請求，隨之而來的就是要解決 ajax的跨域問題。本篇將講述一個小白從遇到跨域不知道是跨域問題，到知道是跨域問題不知道如何解決，再到解決跨域問題，最後找到兩種方法解決ajax 跨域問題的全過程。
不知是跨域問題
起 因是這樣的，為了復用，減少重復開發，單獨開發了一個用戶許可權管理系統，共其他系統獲取認證與授權信息，暫且稱之為A系統；調用A系統以B為例。在B系統 中用ajax調用A系統系統的介面(數據格式為json)，當時特別困惑，在A系統中訪問相應的url可正常回返json數據，但是在B系統中使用 ajax請求同樣的url則一點兒反應都沒有，好像什麼都沒有發生一樣。這樣反反復復改來改去好久都沒能解決，於是求救同事，提醒可能是ajax跨域問 題，於是就將這個問題當做跨域問題來解決了。
知跨域而不知如何解決
知道問題的確切原因，剩下的就是找到解決問題的方法了。google了好久，再次在同事的指點下知道jQuery的ajax有jsonp這樣的屬性可以用來解決跨域的問題。
找到一種解決方式
現在也知道了怎樣來解決跨域問題，餘下的就是實現的細節了。實現的過程中錯誤還是避免不彎搭了的。由於不了解json和jsonp兩種格式的區別，也犯了錯誤，google了好久才解決。
首先來看看在頁面中如何使用jQuery的ajax解決跨塌鬧塵域問題的簡單版：
復制代碼
$(document).ready(function(){
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?'團禪;
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
});
復制代碼
這樣寫是完全沒有問題的，起先error的處理函數中僅僅是alert(「error」)，為了進一步弄清楚是什麼原因造成了錯誤，故將處理函數變 為上面的實現方式。最後一行alert使用為；parsererror。百思不得其解，繼續google，最終還是在萬能的stackoverflow找 到了答案，鏈接在這里。原因是jsonp的格式與json格式有著細微的差別，所以在server端的代碼上稍稍有所不同。
比較一下json與jsonp格式的區別：
json格式：
{
"message":"獲取成功",
"state":"1",
"result":{"name":"工作組1","id":1,"description":"11"}
}
jsonp格式：
callback({
"message":"獲取成功",
"state":"1",
"result":{"name":"工作組1","id":1,"description":"11"}
})
看出來區別了吧，在url中callback傳到後台的參數是神馬callback就是神馬，jsonp比json外面有多了一層，callback()。這樣就知道怎麼處理它了。於是修改後台代碼。
後台java代碼最終如下：
復制代碼
@RequestMapping(value = "/getGroupById")
public String getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "獲取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "獲取失敗", Constants.RESULT_FAILED);
}
String json = JsonConverter.bean2Json(result);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(callback + "(" + json + ")");
return null;
}
復制代碼
注意這里需要先將查詢結果轉換我json格式，然後用參數callback在json外面再套一層，就變成了jsonp。指定數據類型為jsonp的ajax就可以做進一步處理了。
雖然這樣解決了跨域問題，還是回顧下造成parsererror的原因。原因在於盲目的把json格式的數據當做jsonp格式的數據讓ajax處理，造成了這個錯誤，此時server端代碼是這樣的：
復制代碼
@RequestMapping(value = "/getGroupById")
@ResponseBody
public ReturnObject getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response){
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "獲取成功", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "獲取失敗", Constants.RESULT_FAILED);
}
return result;
}
復制代碼
至此解決ajax跨域問題的第一種方式就告一段落。
追加一種解決方式
追求永無止境，在google的過程中，無意中發現了一個專門用來解決跨域問題的jQuery插件-jquery-jsonp。
有第一種方式的基礎，使用jsonp插件也就比較簡單了，server端代碼無需任何改動。
來看一下如何使用jquery-jsonp插件解決跨域問題吧。
復制代碼
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("當前工作組:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});
Ⅳ ajax跨域請求json數據有幾種方式
使中拿拆用jquerygetJson進行跨域讀取數據
實際getJson式根本原理ajax使用jsonp式
jquery用getJson調用獲取遠程數據並通json格式返函數原型：
jQuery.getJSON(url,data,success(data,status,xhr))
參數 描述
url 必需規定請求發送哪 URL
data 選規定連同請求發送伺服器數據
success(data,status,xhr)
選規定請求功運行函數
額外參數：
response - 包含自請求結數據
status - 包含請賣棗求狀態
xhr - 包含 XMLHttpRequest 象
該函數簡寫ajax函數實際等價於：
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
言歸傳面我看何使用getJson跨域獲取數據
html頁面示例代碼：
$.getJSON("xxx?",
function (data) {
alert(data);
}
);
執行原理：
發送請求需要傳callback調函數名伺服器端服務敏尺器端拿調函數名再返數據用參數形式反客戶端客戶端能夠調
Ⅳ 使用jsonp實現跨域獲取數據實例講解
js部分
(function(window,
document)
{
'use
strict';
var
jsonp
=
function(url,
data,
callback)
{
//1、掛讓鄭載回調函數
var
fnsuffix
=
Math.random().toString().replace('.',
'滑滑滑');
var
cbFuncName
=
'my_json_cb'
+
fnsuffix;
window[cbFuncName]
=
callback;
//2、將data轉換成url字元串的形式
//{id=1,count=4}==>id=1&count=4
var
querystring
=
url.indexOf('?')
==
-1
?
'?'
:
'&';
//判斷url中最後是否有？，沒有則為？
for
(var
key
in
data)
{
querystring
+=
key
+
'='
+
data[key]
+
'&';
}
//3、處理url中回調函數
url+=callback=sdgade
querystring
+=
'callback='
+
cbFuncName;
//querystring=?id=1&count=4&callback=sdgade
//4、創建一個script標簽
var
scriptElement
=
document.createElement('script');
scriptElement.src
=
url
+
querystring;
//5、把script標簽放到頁面上
document.body.appendChild(scriptElement);
};
window.$jsonp
=
jsonp;
})(window,
document)
在頁面中測試
<!DOCTYPE
html>
<html>
<head>
<title>jsonp</title>
</head>
<body>
<div
id="htt"></div>
<script
type="text/javascript"
src="http.js"></script>
<script>
(function(){
$jsonp('http://api.douban.com/v2/movie/in_theaters',{},
function(data){
document.getElementById('htt').innerHTML=JSON.stringify(data);
});
})()
</script>
</body>
</html>
結果可以返回結果，頁面顯示為，表信臘示獲取成功！
以上所述是小編給大家介紹的使用jsonp實現跨域獲取數據實例講解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
Ⅵ 我的一個java請求，該如何設置別人就可以跨域訪問我的請求得到數據
一、通過jsonp跨域
在js中，我們直接用XMLHttpRequest請求不同域上的數據時，是不可以的。但是，在頁面上引入不同域上的js腳本文件卻是可以的，jsonp正是利用這個特性來實現的。
比如，有個a.html頁面，它裡面的代碼需要利用ajax獲取一個不同域上的json數據，假設這個json數據地址是http://example.com/data.php,那麼a.html中的代碼就可以這樣：
我們看到b頁面成功的收到了消息。
使用postMessage來跨域傳送數據還是比較直觀和方便的，但是缺點是IE6、IE7不支持，所以用不用還得根據實際需要來決定。
結語：
除了以上幾種方法外，還有flash、在伺服器上設置代理頁面等跨域方式，這里就不做介紹了。
以上四種方法，可以根據項目的實際情況來進行選擇應用，個人認為window.name的方法既不復雜，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法。
Ⅶ jquery ajax 怎樣跨域獲取 json 數據
jsonp是英文json with padding的縮寫。它允許在伺服器端生成script tags至返回至客戶端，也就是動態生成javascript標簽，通過javascript callback的形式實現數據讀取。
html頁面端示例代碼：
復制代碼代碼如下:
//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域請求的URL
dataType : "jsonp",
//傳遞給請求處理程序，用以獲得jsonp回調函數名的參數名(默認為:callback)
jsonp: "jsoncallback"啟散,
//自定義的jsonp回調函數純冊名稱，默認為jQuery自動生成的隨機函數名
jsonpCallback:"success_jsonpCallback",
//成功獲取跨域伺服器上的json數據後,會動態執行這個callback函數
success : function(json){
alert(json);
}
});
});
伺服器端示例代碼，以java為例：
伺服器端代碼，是重點，開始以為，只要客戶端通過jsonp就可以直接跨域訪問，其實不然，需要伺服器端的支持才行。
復制代碼代碼如下:
public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//根據html指定的jsonp回調函數的參數名，獲取回調函數的名稱
//callbackName的值其實就是：success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//簡單模擬一個json字元串，實際可使用google的gson進行轉換，次數通過字元串拼接
//{"name":"張三","age":28}
//\是對"號進行轉義
String jsonStr = "{\"name\":\"張三\",\"age\":28}";
//最終返回悄褲氏的數據為：success_jsonpCallback({"name":"張三","age":28})
String renderStr = callbackName+"("+jsonStr+")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}
Ⅷ 怎麼解決跨域問題
1、 通過jsonp跨域
JSONP（JSON with Padding：填充式JSON)，應用JSON的一種新方法，
JSON、JSONP的區別：
1、JSON返回的是一串數據、JSONP返回的是腳本代碼(包含一個函數調用)
2、JSONP 只支持get請求、不支持post請求
(類似往頁面添加一個script標簽，通過src屬性去觸發對指定地址的請求,故只能是Get請求)
2、代理：
www..com/index.html需要調用www.sina.com/server.php，可以寫一個介面www..com/server.php，由這個介面在後端去調用www.sina.com/server.php並拿到返回值，然後再返回給index.html
3、PHP端修改header
header(『Access-Control-Allow-Origin:*』);//允許所有來源訪問
header(『Access-Control-Allow-Method:POST,GET』);//允許訪問的方式
4、document.domain
跨域分為兩種，一種xhr不能訪問不同源的文檔，另一種是不同window之間不能進行交互操作;
document.domain主要是解決第二種情況，且只能適用於主域相同子域不同的情況；
document.domain的設置是有限制的，我們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。例如：a.b.example.com中某個文檔的document.domain可以設成a.b.example.com、b.example.com 、example.com中的任意一個，但是不可以設成c.a.b.example.com，因為這是當前域的子域，也不可以設成.com，因為主域已經不相同了。
兼容性：所有瀏覽器都支持；
優點：
可以實現不同window之間的相互訪問和操作；
缺點：
只適用於父子window之間的通信，不能用於xhr；
只能在主域相同且子域不同的情況下使用；
使用方式：
不同的框架之間是可以獲取window對象的，但卻無法獲取相應的屬性和方法。比如，有一個頁面，它的地址是http://www.example.com/a.html ， 在這個頁面裡面有一個iframe，它的src是http://example.com/b.html, 很顯然，這個頁面與它裡面的iframe框架是不同域的，所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的：
<script type="text/javascript">
function test(){
var iframe = document.getElementById('ifame');
var win = document.contentWindow;//可以獲取到iframe里的window對象，但該window對象的屬性和方法幾乎是不可用的
var doc = win.document;//這里獲取不到iframe里的document對象
var name = win.name;//這里同樣獲取不到window對象的name屬性
}
</script>
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
這個時候，document.domain就可以派上用場了，我們只要把http://www.example.com/a.html 和 http://example.com/b.html這兩個頁面的document.domain都設成相同的域名就可以了。
1.在頁面 http://www.example.com/a.html 中設置document.domain:
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
document.domain = 'example.com';//設置成主域
function test(){
alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 對象
}
</script>
2.在頁面 http://example.com/b.html 中也設置document.domain:
<script type="text/javascript">
document.domain = 'example.com';//在iframe載入這個頁面也設置document.domain，使之與主頁面的document.domain相同
</script>
5、window.name
關鍵點：window.name在頁面的生命周期里共享一個window.name;
兼容性：所有瀏覽器都支持；
優點：
最簡單的利用了瀏覽器的特性來做到不同域之間的數據傳遞；
不需要前端和後端的特殊配製；
缺點：
大小限制：window.name最大size是2M左右，不同瀏覽器中會有不同約定；
安全性：當前頁面所有window都可以修改，很不安全；
數據類型：傳遞數據只能限於字元串，如果是對象或者其他會自動被轉化為字元串，如下；
這里寫圖片描述
使用方式：修改window.name的值即可；
6、postMessage
關鍵點：
postMessage是h5引入的一個新概念，現在也在進一步的推廣和發展中，他進行了一系列的封裝，我們可以通過window.postMessage的方式進行使用，並可以監聽其發送的消息；
兼容性：移動端可以放心用，但是pc端需要做降級處理
優點
不需要後端介入就可以做到跨域，一個函數外加兩個參數（請求url，發送數據）就可以搞定；
移動端兼容性好；
缺點
無法做到一對一的傳遞方式：監聽中需要做很多消息的識別，由於postMessage發出的消息對於同一個頁面的不同功能相當於一個廣播的過程，該頁面的所有onmessage都會收到，所以需要做消息的判斷；
安全性問題：三方可以通過截獲，注入html或者腳本的形式監聽到消息，從而能夠做到篡改的效果，所以在postMessage和onmessage中一定要做好這方面的限制；
發送的數據會通過結構化克隆演算法進行序列化，所以只有滿足該演算法要求的參數才能夠被解析，否則會報錯，如function就不能當作參數進行傳遞；
使用方式：通信的函數，sendMessage負責發送消息，bindEvent負責消息的監聽並處理，可以通過代碼來做一個大致了解；
Storage.prototype.sendMessage_ = function(type, params, fn) {
if (this.topWindow) {
this.handleCookie_(type, params, fn);
return;
}
var eventId = this.addToQueue_(fn, type);
var storageIframe = document.getElementById('mip-storage-iframe');
var element = document.createElement("a");
element.href = this.origin;
var origin = element.href.slice(0, element.href.indexOf(element.pathname) + 1);
storageIframe.contentWindow.postMessage({
type: type,
params: params,
eventId: eventId
}, origin);
}
Storage.prototype.bindEvent_ = function() {
window.onmessage = function (res) {
// 判斷消息來源
if (window == res.source.window.parent &&
res.data.type === this.messageType.RES &&
window.location.href.match(res.origin.host).length > 0) {
var fn = this.eventQueue[res.data.eventId];
fn && fn();
delete this.eventQueue[res.data.eventId];
// reset id
var isEmpty = true;
for (var t in this.eventQueue) {
isEmpty = false;
}
if (isEmpty) {
this.id = 0;
}
}
}.bind(this);
}
Ⅸ 怎麼解決跨域的.以及後續jsonp的原理和實現以及cors怎麼設置
XMLHttpRequest跨域對於早友IE而言可以直接完成，但是對於其他瀏覽器而言報錯，無法跨域，有人說要設置瀏覽器；
因此，需要伺服器給出回調函數callback，用於客陸攜槐戶端調用；
這就是所謂的jsonp調用；
如果是自己的伺服器和客戶端，但是用協議訪問，也是跨域，當然可以設置自隱察己的伺服器代碼，添加cros等設置即可，網頁搜索一大把。
如果是其他的伺服器，那就要他們給出回調函數，如果沒有，就不能完美的調用，除非用後台代碼。
Ⅹ jsonp跨域請求怎麼設
一、同源策略
要理解跨域，先要了解一下「同源策略」。所謂同源是指，域名，協議，埠相同。所謂「同源策略「，簡單的說就是基於安全考慮，當前域不能訪問其他域的東西。
一些常見的是否同源示例可參照下表：
JSONP目前還是比較流行的跨域方式，雖然JSONP使用起來方便，但是也存在一些問題：
首先， JSONP 是從其他域中載入代碼執行。如果其他域不安全，很可能會在響應中夾帶一些惡意代碼，而此時除了完全放棄 JSONP 調用之外，沒有辦法追究。因此在使用不是你自己運維的 Web 服務時，一定得保證它安全可靠。
其次，要確定 JSONP 請求是否失敗並不容易。雖然 HTML5 給<script>元素新增了一個 onerror事件處理程序，但目前還沒有得到任何瀏覽器支持。為此，開發人員不得不使用計時器檢測指定時間內是否接收到了響應。
二、jQuery封裝JSONP
對於經常用jQuery的開發者來說，能注意到jQuery封裝的$.ajax中有一個dataType屬性，如果將該屬性設置成dataType:"jsonp"，就能實現JSONP跨域了。需要了解的一點是，雖然jQuery將JSONP封裝在$.ajax中，但是其本質與$.ajax不一樣。
通過jQuery的$.ajax實現跨域的代碼參考如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>jQuery實現JSONP</title></head><body>
<div id="mydiv">
<button id="btn">點擊</button>
</div></body><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script><script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的數據類型，設置為JSONP方式
jsonp : 'callback', //指定一個查詢參數名稱來覆蓋默認的 jsonp 回調參數名 callback
jsonpCallback: 'handleResponse', //設置回調函數名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('狀態為：' + status + ',狀態是：' + xhr.statusText);
console.log(response);
}
});
});
});</script></html>
最後的結果與JavaScript通過動態添加<script>標簽得到的結果是一樣的。
通過$.getJSON(）
利用getJSON來實現，只要在地址中加上callback=?參數即可，參考代碼如下：
$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
console.log(data);
});123
這樣也能實現跨域的功能。