跨域

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;
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章