轉(zhuǎn)載自??搞定所有的跨域請求問題

網(wǎng)上各種跨域教程，各種實(shí)踐，各種問答，除了簡單的 jsonp 以外，很多說 CORS 的都是行不通的，老是缺那么一兩個(gè)關(guān)鍵的配置。本文只想解決問題，所有的代碼經(jīng)過親自實(shí)踐。

本文解決跨域中的 get、post、data、cookie 等這些問題。

本文只會(huì)說 get 請求和 post 請求，讀者請把 post 請求理解成除 get 請求外的所有其他請求方式。

JSONP

jsonp 的原理很簡單，利用了【前端請求靜態(tài)資源的時(shí)候不存在跨域問題】這個(gè)思路。

但是?只支持 get，只支持 get，只支持 get。

注意一點(diǎn)，既然這個(gè)方法叫 jsonp，后端數(shù)據(jù)一定要使用 json 數(shù)據(jù)，不能隨便的搞個(gè)字符串什么的，不然你會(huì)覺得結(jié)果莫名其妙的。

前端 jQuery 寫法

$.ajax({type: "get",url: baseUrl + "/jsonp/get",dataType: "jsonp",success: function(response) {$("#response").val(JSON.stringify(response));} });

dataType: "jsonp"。除了這個(gè)，其他配置和普通的請求是一樣的。

后端 SpringMVC 配置

如果你也使用 SpringMVC，那么配置一個(gè) jsonp 的 Advice 就可以了，這樣我們寫的每一個(gè) Controller 方法就完全不需要考慮客戶端到底是不是 jsonp 請求了，Spring 會(huì)自動(dòng)做相應(yīng)的處理。

@ControllerAdvice public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {public JsonpAdvice(){// 這樣如果請求中帶 callback 參數(shù)，Spring 就知道這個(gè)是 jsonp 的請求了super("callback");} }

以上寫法要求?SpringMVC 版本不低于 3.2，低于 3.2 的我只能說，你們該升級(jí)了。

后端非 SpringMVC 配置

以前剛工作的時(shí)候，Struts2 還紅遍天，幾年的光景，SpringMVC 就基本統(tǒng)治下來了國內(nèi)市場。

偷懶一下，這里貼個(gè)偽代碼吧，在我們的方法返回前端之前調(diào)一下 wrap 方法：

public Object wrap(HttpServletRequest request){String callback = request.getParameter("callback");if(StringUtils.isBlank(callback)){return result;} else {return callback+"("+JSON.toJSONString(result)+")";} }

CORS

Cross-Origin Resource Sharing

畢竟 jsonp 只支持 get 請求，肯定不能滿足我們的所有的請求需要，所以才需要搬出 CORS。

國內(nèi)的 web 開發(fā)者還是比較苦逼的，用戶死不升級(jí)瀏覽器，老板還死要開發(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 都沒法維護(hù)，很多人都栽在這里。當(dāng)然，如果你沒有這個(gè)需求，也就不需要配置這個(gè)了。

后端 SpringMVC 配置

對(duì)于大部分的 web 項(xiàng)目，一般都會(huì)有 mvc 相關(guān)的配置類，此類繼承自 WebMvcConfigurerAdapter。如果你也使用 SpringMVC 4.2 以上的版本的話，直接像下面這樣添加這個(gè)方法就可以了：

@Configuration public class WebConfig extends WebMvcConfigurerAdapter {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**/*").allowedOrigins("*");} }

如果很不幸你的項(xiàng)目中 SpringMVC 版本低于 4.2，那么需要「曲線救國」一下：

public class CrossDomainFilter extends OncePerRequestFilter {@Overrideprotected 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>

有很多項(xiàng)目用 shiro 的，也可以通過配置 shiro 過濾器的方式，這里就不介紹了。

注意了，我說的是很籠統(tǒng)的配置，對(duì)于大部分項(xiàng)目是可以這么籠統(tǒng)地配置的。文中類似 “*” 這種配置讀者應(yīng)該都能知道怎么配。

如果讀者發(fā)現(xiàn)瀏覽器提示不能用 ‘*’ 符號(hào)，那讀者可以在上面的 filter 中根據(jù) request 對(duì)象拿到請求頭中的 referer（request.getHeader("referer")），然后動(dòng)態(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", "*"); }

2018-04-28：今天終于知道為什么有時(shí)候會(huì)提示我們 * 不支持了，原來是只要前端寫了 withCredentials: true 那么瀏覽器就會(huì)提示這個(gè)，一種辦法就是這里說的使用動(dòng)態(tài)構(gòu)造 origin 的方式，另一種辦法就是跨域不傳 cookie，讓前端把 cookie 要傳的信息(如 sessionId/accessKey) 放到 header 中或者直接寫在 request 的參數(shù)里。

前端非 jQuery 寫法

jQuery 一招鮮吃遍天的日子是徹底不在了，這里就說說如果不使用 jQuery 的話，怎么解決 post 跨域的問題。大部分的 js 庫都會(huì)提供相應(yīng)的方案的，大家直接找相應(yīng)的文檔看看就知道怎么用了。

來一段原生 js 介紹下：

function createCORSRequest(method, url) {var xhr = new XMLHttpRequest();if ("withCredentials" in xhr) {// 如果有 withCredentials 這個(gè)屬性，那么可以肯定是 XMLHTTPRequest2 對(duì)象。看第三個(gè)參數(shù)xhr.open(method, url, true);} else if (typeof XDomainRequest != "undefined") {// 此對(duì)象是 IE 用來跨域請求的xhr = new XDomainRequest();xhr.open(method, url);} else {// 如果是這樣，很不幸，瀏覽器不支持 CORSxhr = null;}return xhr; }var xhr = createCORSRequest('GET', url); if (!xhr) {throw new Error('CORS not supported'); }

其中，Chrome，Firefox，Opera，Safari 這些「程序員友好」的瀏覽器使用的是 XMLHTTPRequest2 對(duì)象。IE 使用的是 XDomainRequest。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的搞定所有的跨域请求问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。