如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一、跨域科普
跨域，即跨站HTTP請(qǐng)求(Cross-site HTTP request)，指發(fā)起請(qǐng)求的資源所在域不同于請(qǐng)求指向資源所在域的HTTP請(qǐng)求。
二、如何產(chǎn)生跨域
當(dāng)使用前后端分離，后端主導(dǎo)的開(kāi)發(fā)方式進(jìn)行前后端協(xié)作開(kāi)發(fā)時(shí)，常常有如下情景：
a、后端開(kāi)發(fā)完畢在服務(wù)器上進(jìn)行部署并給前端API文檔。
b、前端在本地進(jìn)行開(kāi)發(fā)并向遠(yuǎn)程服務(wù)器上部署的后端發(fā)送請(qǐng)求。
c、在這種開(kāi)發(fā)過(guò)程中，如果前端想要一邊開(kāi)發(fā)一邊測(cè)試接口，就需要使用跨域的方式。
三、解決方案
1、JQuery+ajax+jsonp 跨域訪問(wèn)
Jsonp(JSON with Padding)是資料格式 json 的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的網(wǎng)域獲取資料。
下面給出例子：
html 前端代碼：
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title>Insert title heretitle>
-
<script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>
-
</head>
-
<script type="text/javascript">
-
$(function(){
-
/*
-
//簡(jiǎn)寫形式，效果相同
-
$.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",
-
function(data){
-
$("#showcontent").text("Result:"+data.result)
-
});
-
*/
-
$.ajax({
-
type : "get",
-
async:false,
-
url : "http://app.example.com/base/json.do?sid=1494&busiId=101",
-
dataType : "jsonp",//數(shù)據(jù)類型為jsonp
-
jsonp: "jsonpCallback",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù)
-
success : function(data){
-
$("#showcontent").text("Result:"+data.result)
-
},
-
error:function(){
-
alert('fail');
-
}
-
});
-
});
-
</script>
-
<body>
-
<div id="showcontent">Result:</div>
-
</body>
-
</html>
服務(wù)器端：
-
import java.io.IOException;
-
import java.io.PrintWriter;
-
import java.util.HashMap;
-
import java.util.Map;
-
import javax.servlet.http.HttpServletRequest;
-
import javax.servlet.http.HttpServletResponse;
-
import net.sf.json.JSONObject;
-
import org.springframework.stereotype.Controller;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
-
@Controller
-
public class ExchangeJsonController {
-
@RequestMapping("/base/json.do")
-
public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {
-
try {
-
response.setContentType("text/plain");
-
response.setHeader("Pragma", "No-cache");
-
response.setHeader("Cache-Control", "no-cache");
-
response.setDateHeader("Expires", 0);
-
Map<String,String> map = new HashMap<String,String>();
-
map.put("result", "content");
-
PrintWriter out = response.getWriter();
-
JSONObject resultJSON = JSONObject.fromObject(map);
-
String jsonpCallback = request.getParameter("jsonpCallback");
-
out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");
-
out.flush();
-
out.close();
-
} catch (IOException e) {
-
e.printStackTrace();
-
}
-
}
-
}
2、通過(guò)注解的方式允許跨域
在Controller類或其方法上加@CrossOrigin注解，來(lái)使之支持跨域。
舉例：
-
@CrossOrigin(origins = "*", maxAge = 3600)
-
@RestController
-
@RequestMapping("/User")
-
public class UserController {
-
}
其中origins為CrossOrigin的默認(rèn)參數(shù)，即跨域來(lái)源，*即任何來(lái)源，也可以是其他域名。即可以以以下形式：
-
@CrossOrigin("http://test.com")
-
@CrossOrigin(origins="http://test.com",maxAge=3600)
該注解用于方法上，寫法相同，處理時(shí)，SpringMVC會(huì)對(duì)類上標(biāo)簽和方法上標(biāo)簽進(jìn)行合并。
3、通過(guò)配置文件的方式允許跨域
在web.xml中添加如下配置：
-
<filter-mapping>
-
<filter-name>CorsFilter</filter-name>
-
<url-pattern>/*</url-pattern>
-
</filter-mapping>
使用這個(gè)Filter即可讓整個(gè)服務(wù)器全局允許跨域。
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
