JSONP
jsonp 的原理很簡單,利用了【前端請求靜態(tài)資源的時候不存在跨域問題】這個思路。
但是 只支持 get,只支持 get,只支持 get。
注意一點,既然這個方法叫 jsonp,后端數(shù)據(jù)一定要使用 json 數(shù)據(jù),不能隨便的搞個字符串什么的,不然你會覺得結(jié)果莫名其妙的。
前端 jQuery 寫法
$.ajax({
type: "get",
url: baseUrl + "/jsonp/get",
dataType: "jsonp",
success: function(response) {
$("#response").val(JSON.stringify(response));
}
});
dataType: “jsonp”。除了這個,其他配置和普通的請求是一樣的。
后端 SpringMVC 配置
如果你也使用 SpringMVC,那么配置一個 jsonp 的 Advice 就可以了,這樣我們寫的每一個 Controller 方法就完全不需要考慮客戶端到底是不是 jsonp 請求了,Spring 會自動做相應(yīng)的處理。
@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
public JsonpAdvice(){
// 這樣如果請求中帶 callback 參數(shù),Spring 就知道這個是 jsonp 的請求了
super("callback");
}
}
以上寫法要求 SpringMVC 版本不低于 3.2,低于 3.2 的我只能說,你們該升級了。
后端非 SpringMVC 配置
以前剛工作的時候,Struts2 還紅遍天,幾年的光景,SpringMVC 就基本統(tǒng)治下來了國內(nèi)市場。
偷懶一下,這里貼個偽代碼吧,在我們的方法返回前端之前調(diào)一下 wrap 方法:
@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
public JsonpAdvice(){
// 這樣如果請求中帶 callback 參數(shù),Spring 就知道這個是 jsonp 的請求了
super("callback");
}
}
CORS
Cross-Origin Resource Sharing
畢竟 jsonp 只支持 get 請求,肯定不能滿足我們的所有的請求需要,所以才需要搬出 CORS。
國內(nèi)的 web 開發(fā)者還是比較苦逼的,用戶死不升級瀏覽器,老板還死要開發(fā)者做兼容。
CORS 支持以下瀏覽器,目前來看,瀏覽器的問題已經(jīng)越來越不重要了,連淘寶都不支持 IE7 了~~~
-
Chrome 3+
-
Firefox 3.5+
-
Opera 12+
-
Safari 4+
-
Internet Explorer 8+
前端 jQuery 寫法
直接看代碼吧:
$.ajax({
type: "POST",
url: baseUrl + "/jsonp/post",
dataType: 'json',
crossDomain: true,
xhrFields: {
withCredentials: true
},
data: {
name: "name_from_frontend"
},
success: function (response) {
console.log(response)// 返回的 json 數(shù)據(jù)
$("#response").val(JSON.stringify(response));
}
});
dataType: “json”,這里是 json,不是 jsonp,不是 jsonp,不是 jsonp。
crossDomain: true,這里代表使用跨域請求
xhrFields: {withCredentials: true},這樣配置就可以把 cookie 帶過去了,不然我們連 session 都沒法維護,很多人都栽在這里。當然,如果你沒有這個需求,也就不需要配置這個了。
后端 SpringMVC 配置
對于大部分的 web 項目,一般都會有 mvc 相關(guān)的配置類,此類繼承自 WebMvcConfigurerAdapter。如果你也使用 SpringMVC 4.2 以上的版本的話,直接像下面這樣添加這個方法就可以了:
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**/*").allowedOrigins("*");
}
}
如果很不幸你的項目中 SpringMVC 版本低于 4.2,那么需要「曲線救國」一下:
public class CrossDomainFilter extends OncePerRequestFilter {
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Origin", "*");// 如果提示 * 不行,請往下看
response.addHeader("Access-Control-Allow-Credentials", "true");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
filterChain.doFilter(request, response);
}
}
在 web.xml 中配置下 filter:
<filter>
<filter-name>CrossDomainFilter</filter-name>
<filter-class>com.javadoop.filters.CrossDomainFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CrossDomainFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
有很多項目用 shiro 的,也可以通過配置 shiro 過濾器的方式,這里就不介紹了。
注意了,我說的是很籠統(tǒng)的配置,對于大部分項目是可以這么籠統(tǒng)地配置的。文中類似 “*” 這種配置讀者應(yīng)該都能知道怎么配。
如果讀者發(fā)現(xiàn)瀏覽器提示不能用 ‘*’ 符號,那讀者可以在上面的 filter 中根據(jù) request 對象拿到請求頭中的 referer(request.getHeader(“referer”)),然后動態(tài)地設(shè)置 “Access-Control-Allow-Origin”:
String referer = request.getHeader("referer");
if (StringUtils.isNotBlank(referer)) {
URL url = new URL(referer);
String origin = url.getProtocol() + "://" + url.getHost();
response.addHeader("Access-Control-Allow-Origin", origin);
} else {
response.addHeader("Access-Control-Allow-Origin", "*");
}
前端非 jQuery 寫法
jQuery 一招鮮吃遍天的日子是徹底不在了,這里就說說如果不使用 jQuery 的話,怎么解決 post 跨域的問題。
來一段原生 js 介紹下:
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 如果有 withCredentials 這個屬性,那么可以肯定是 XMLHTTPRequest2 對象。看第三個參數(shù)
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// 此對象是 IE 用來跨域請求的
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 如果是這樣,很不幸,瀏覽器不支持 CORS
xhr = null;
}
return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}
其中,Chrome,F(xiàn)irefox,Opera,Safari 這些「程序員友好」的瀏覽器使用的是 XMLHTTPRequest2 對象。IE 使用的是 XDomainRequest。