1.jsonp跨域(只支持get請求)
$.ajax({
type: "get",
url: 'URL',
data: {
data: JSON.stringify(arr)
},
dataType: "jsonp",
callback: "callback",
beforeSend: function() {
$.showPreloader();
},
success: function(data) {
if(data.status == 'SUCCESS') {
$.alert('提交成功', function() {
window.location.href = 'URL';
});
}else{
$.alert('網絡連接異常');
}
},
complete: function() {
$.hidePreloader();
}
});
通過jsonp可以簡單處理跨域問題,我認爲只要前端做出配合即可,但是存在一個問題,get請求會暴露URL上的傳輸參數,這樣如果URL超過2KB,會導致request data 過大,無法正常與後端交互,這也只適應data數據少量的情況。
2.Tomcat配置跨域
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
3.修改響應頭,即在後端的respone設置Http頭。
@RequestMapping(value =
"batchSave")
@ResponseBody
public
Object acceptDataToSave(HttpServletRequest request, String data, HttpServletResponse response){
跨域的設置爲藍色背景
/**
* 採用下列方法解決post跨域問題
*/
response.addHeader("Access-Control-Allow-Origin",
"*");
response.addHeader("Access-Control-Allow-Methods",
"GET, POST, OPTIONS");
response.addHeader("Access-Control-Allow-Headers",
"Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
logger.info("begin
to accept data..........");
//用於返回前端的狀態標示:SUCCESS爲成功;FALSE爲失敗
String status =
"FALSE";
/*
業務邏輯
...................................
*/
Map<String,String> result =
new
HashMap<String,String>();
result.put("status",status);
return
result;
}