如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、跨域科普
跨域，即跨站HTTP請求(Cross-site HTTP request)，指發起請求的資源所在域不同于請求指向資源所在域的HTTP請求。
二、如何產生跨域
當使用前后端分離，后端主導的開發方式進行前后端協作開發時，常常有如下情景：
a、后端開發完畢在服務器上進行部署并給前端API文檔。
b、前端在本地進行開發并向遠程服務器上部署的后端發送請求。
c、在這種開發過程中，如果前端想要一邊開發一邊測試接口，就需要使用跨域的方式。
三、解決方案
1、JQuery+ajax+jsonp 跨域訪問
Jsonp(JSON with Padding)是資料格式 json 的一種“使用模式”，可以讓網頁從別的網域獲取資料。
下面給出例子：
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 here</title>
-
<script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>
-
</head>
-
<script type="text/javascript">
-
$(function(){
-
/*
-
//簡寫形式，效果相同
-
$.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",//數據類型為jsonp
-
jsonp: "jsonpCallback",//服務端用于接收callback調用的function名的參數
-
success : function(data){
-
$("#showcontent").text("Result:"+data.result)
-
},
-
error:function(){
-
alert('fail');
-
}
-
});
-
});
-
</script>
-
<body>
-
<div id="showcontent">Result:</div>
-
</body>
-
</html>
服務器端：
-
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、通過注解的方式允許跨域
在Controller類或其方法上加@CrossOrigin注解，來使之支持跨域。
舉例：
-
@CrossOrigin(origins = "*", maxAge = 3600)
-
@RestController
-
@RequestMapping("/User")
-
public class UserController {
-
}
其中origins為CrossOrigin的默認參數，即跨域來源，*即任何來源，也可以是其他域名。即可以以以下形式：
-
@CrossOrigin("http://test.com")
-
@CrossOrigin(origins="http://test.com",maxAge=3600)
該注解用于方法上，寫法相同，處理時，SpringMVC會對類上標簽和方法上標簽進行合并。
3、通過配置文件的方式允許跨域
在web.xml中添加如下配置：
-
<filter-mapping>
-
<filter-name>CorsFilter</filter-name>
-
<url-pattern>/*</url-pattern>
-
</filter-mapping>
使用這個Filter即可讓整個服務器全局允許跨域。
藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
