在工作中，大家應該都遇到過ajax跨域問題，瀏覽器的錯誤如下：
XMLHttpRequest cannot load http://目標地址No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://當前頁面地址' is therefore not allowed access.
為什么會出現跨域問題
跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制。
在此說明一下，所謂的同源，指的是域名、協議、端口均相等。舉例如下：
http://www.abc.com/a/b 調用 http://www.abc.com/d/c（非跨域）
http://www.abc.com/a/b 調用 http://www.def.com/d/c （跨域：域名不一致）
http://www.abc.com:81/a/b 調用 http://www.abc.com:82/d/c （跨域：端口不一致）
http://www.abc.com/a/b 調用 https://www.abc.com/d/c （跨域：協議不同）
請注意：localhost和127.0.0.1雖然都指向本機，但也屬于跨域。
在一個http請求中，http頭部Referer或Origin字段標識了當前域名，Host字段標識了此時請求的域名。
故，如果我們在當前的js頁面，通過ajax請求第三方的數據，就會出現瀏覽器的跨域問題。
解決跨域問題
解決跨域問題，有如下三種方式：
1、使用jsonp
2、服務器代理
3、在服務端設置response header中Access-Control-Allow-Origin字段。
使用jsonp
jsonp解決跨域問題的原理是，瀏覽器的script標簽是不受同源策略限制的，我們可以在script標簽中訪問任何域名下的資源文件。利用這一特性，用script標簽從服務器中請求數據，同時服務器返回一個帶有方法和數據的js代碼，請求完成，調用本地的js方法，來完成數據的處理。
前端實現，以Jquery的ajax方法為例：
$.ajax({
url:"",
dataType:'jsonp',
data:'',
jsonp:'callback', //傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(默認為:callback)
success:function(result) {
//成功的處理
},
error:function(){
//錯誤處理
}
});
服務端此時返回的不能是普通的json字符串，而是一段可以被前端js執行的一段js代碼。
比較一下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"}
})
從格式來看，jsonp是在json的基礎上包裝了一個方法名，此方法名是前端請求傳過來的，如請求地址為：http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACK，那么方法名就是JSONP_CALLBACK。
下面提供一段java代碼，對象轉jsonp的工具類：
package com.tooklili.app.web.util;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang.StringUtils;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import com.fasterxml.jackson.databind.util.JSONPObject;
/**
@author ding.shuai
-
@date 2016年8月15日上午9:47:02
*/
public class AppUtil {/**
- 判斷json字符串是否需要轉化成jsonp格式
- @param request
- @param result
- @return
*/
public static Object conversionJsonp(Object result){
HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();
return conversionJsonp(request, result);
}
public static Object conversionJsonp(HttpServletRequest request,Object result){
String callback = request.getParameter("callback");
if(StringUtils.isNotEmpty(callback)){
return new JSONPObject(callback, result);
}
return result;
}
}
jsonp的缺點：
1、JSONP是一種非官方的方法，而且這種方法只支持GET方法，不如POST方法安全。（從實現機制就可明白）。
2、JSONP的實現需要服務器配合，如果是訪問的是第三方的服務器，我們沒有修改服務器的權限，那么這種方式是不可行的。
服務器代理
這種方式運用的就是服務器的反向代理技術，控制客戶端和服務器的訪問都從代理服務器經過，比如用nginx作為服務器代理，在nginx上配置客戶端和第三方服務的反向代理，這樣就可保證客戶端、第三方是同源的了，同一個源，都來自代理服務器。
關于nginx的反向代理配置，可訪問我的這篇博客：http://blog.csdn.net/csdn_ds/article/details/58605591
服務器代理的缺點：
開發比較麻煩，對開發環境比較嚴格，需要在本機上配置代理服務器。
優點:
完美解決使用jsonp，第三方服務沒有修改權限的問題。程序的代碼侵入性小，代碼級別不需要考慮跨域問題。
在服務端設置response header中Access-Control-Allow-Origin字段
在被請求的Response Header中加入如下代碼：
// 指定允許其他域名訪問
response.setHeader("Access-Control-Allow-Origin", "*");
// 響應類型
response.setHeader("Access-Control-Allow-Methods", "POST");
// 響應頭設置
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
如果所有請求都想讓其他域名的服務通過瀏覽器ajax請求到，可以通過Filter統一設置response header。
package com.tooklili.app.web.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
/**
設置公共屬性的過濾器
@author shuai.ding
-
@date 2017年6月21日上午11:02:27
*/
public class CommonSetFilter implements Filter{@Override
public void init(FilterConfig filterConfig) throws ServletException {
}@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
//解決跨域問題
HttpServletResponse httpServletResponse =(HttpServletResponse)response;
// 指定允許其他域名訪問
httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
// 響應類型
httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST");
// 響應頭設置
httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");chain.doFilter(request, response);}
@Override
public void destroy() {
}
}
此處說明一下，筆者親測：只設置Access-Control-Allow-Origin屬性也是可以的。
Access-Control-Allow-Origin:* 表示允許任何域名跨域訪問
如果需要指定某域名才允許跨域訪問，只需把Access-Control-Allow-Origin:*改為Access-Control-Allow-Origin:允許的域名
例如：response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);
缺點：
1、此種解決跨域方案，需要瀏覽器支持H5，因為這是HTML5解決跨域的方式，如果產品面向的是PC端，這種方式可能就不是一個好的解決方案，如果面向的是手機端，此方法不為一個簡單、粗暴的好方式。
2、設置*，存在安全隱患。
總結
綜上三種解決跨域的方案，個人感覺使用服務代理最好，沒有破壞瀏覽器的安全策略，但這個對開發環境要高一點。設置response header的方式，根據具體情況分析，要考慮清楚產品面向的用戶。對于jsonp這種方式，雖然沒有破壞瀏覽器的安全策略，但只支持get方式的請求，有點不能接受，因為get傳輸有參數長度的限制，同時又要考慮傳輸中文的亂碼問題，但如果項目中只是簡單的查詢、展示，這種方式還是可以考慮的。
