国产免费观看青青草原网站_久久精品视频色悠悠_影音先锋激情5566_日本一區二區三區免費高清在線_麻豆精品一区综合av_丰满的大屁股一区二区_男女啪啪免费网站_草莓视频app在线观看下载_午夜寂寞少妇AA片_混乱的生物课月老师后续视频

 
您現(xiàn)在的位置:首頁 ? 知識庫 ? 軟件開發(fā) 軟件開發(fā)
jsonp & CORS輕松解決跨域難題
發(fā)布日期:2018-04-11

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。

  • 1.公司登記注冊于2003年1月27日,清遠市桑達電子網(wǎng)絡(luò)媒體有限公司
    2.公司2006年起成為清遠市政府定點協(xié)議供貨商,電子采購供貨商
    3.公司2007年被清遠市相關(guān)政府部門評為安防行業(yè)狀元
    4.公司2007年起成為長城電腦清遠如意服務(wù)站(SP368)
    5.公司2007年承建清遠市橫河路口電子警察工程,開創(chuàng)清遠電子警察先河。
  • 6.公司2007年起成為IBM合作伙伴、公司2010年底成為金蝶軟件清遠金牌代理(伙伴編號:30030013)
    7.公司組團隊參加南方都市報組織的創(chuàng)富評選,獲廣東80強。公司申請多項軟件著作權(quán)、專利權(quán)
    8.2016年起公司成為粵東西北地區(qū)為數(shù)不多的雙軟企業(yè),確立“讓軟件驅(qū)動世界,讓智能改變生活!"企業(yè)理想
    9.2016-01-29更名為廣東互動電子網(wǎng)絡(luò)媒體有限公司
    10.2021-01-13更名為廣東互動電子有限公司
  • 投資合作咨詢熱線電話:0763-3391888 3323588
  • 做一個負責任的百年企業(yè)! 天行健,君子以自強不息;地勢坤,君子以厚德載物;
    為用戶創(chuàng)造價值! 讓軟件驅(qū)動世界; 讓智能改變生活; 超越顧客期望,幫助顧客成功;
    對客戶負責,對員工負責,對企業(yè)命運負責!幫助支持公司的客戶成功;幫助忠誠于公司的員工成功!
  • 聯(lián)系電話:0763-3391888 3323588 3318977
    服務(wù)熱線:18023314222 QQ:529623964
  • 工作QQ:2501204690 商務(wù)QQ: 602045550
    投資及業(yè)務(wù)投訴QQ: 529623964
    微信:小米哥 微信號:qysed3391888
    騰訊微博:桑達網(wǎng)絡(luò)-基石與起點
  • E-MAIL:222#QYSED.CN ok3391888#163.com (請用@替換#)
在線客服
  • 系統(tǒng)集成咨詢
    點擊這里給我發(fā)消息
  • 網(wǎng)站\微信\軟件咨詢
    點擊這里給我發(fā)消息
  • 售后服務(wù)
    點擊這里給我發(fā)消息
  • 投資合作
    點擊這里給我發(fā)消息