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

本文解決跨域中的 get、post、data、cookie 等這些問(wèn)題。

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

JSONP

JSONP是利用瀏覽器對(duì)script的資源引用沒(méi)有同源限制，通過(guò)動(dòng)態(tài)插入一個(gè)script標(biāo)簽，當(dāng)資源加載到頁(yè)面后會(huì)立即執(zhí)行的原理實(shí)現(xiàn)跨域的。JSONP是一種非正式傳輸協(xié)議，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback或者開(kāi)始就定義一個(gè)回調(diào)方法，參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了。

JSONP只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求,它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題，JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，弊端也比較明顯：需要客戶端和服務(wù)端定制進(jìn)行開(kāi)發(fā)，服務(wù)端返回的數(shù)據(jù)不能是標(biāo)準(zhǔn)的Json數(shù)據(jù)，而是callback包裹的數(shù)據(jù)。

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

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

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

前端 jQuery 寫(xiě)法

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

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

后端 SpringMVC 配置

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

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

以上寫(xiě)法要求 SpringMVC 版本不低于 3.2，低于 3.2 的我只能說(shuō)，你們?cè)撋?jí)了。

后端非 SpringMVC 配置

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

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

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

CORS

Cross-Origin Resource Sharing

CORS是現(xiàn)代瀏覽器支持跨域資源請(qǐng)求的一種方式，全稱是"跨域資源共享"（Cross-originresourcesharing），當(dāng)使用XMLHttpRequest發(fā)送請(qǐng)求時(shí)，瀏覽器發(fā)現(xiàn)該請(qǐng)求不符合同源策略，會(huì)給該請(qǐng)求加一個(gè)請(qǐng)求頭：Origin，后臺(tái)進(jìn)行一系列處理，如果確定接受請(qǐng)求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin;瀏覽器判斷該相應(yīng)頭中是否包含Origin的值，如果有則瀏覽器會(huì)處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時(shí)我們無(wú)法拿到響應(yīng)數(shù)據(jù)。

CORS與JSONP的使用目的相同，但是比JSONP更強(qiáng)大，CORS支持所有的瀏覽器請(qǐng)求類型，承載的請(qǐng)求數(shù)據(jù)量更大，開(kāi)放更簡(jiǎn)潔，服務(wù)端只需要將處理后的數(shù)據(jù)直接返回，不需要再特殊處理。

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

國(guó)內(nèi)的 web 開(kāi)發(fā)者還是比較苦逼的，用戶死不升級(jí)瀏覽器，老板還死要開(kāi)發(fā)者做兼容。

CORS 支持以下瀏覽器，目前來(lái)看，瀏覽器的問(wèn)題已經(jīng)越來(lái)越不重要了，連淘寶都不支持 IE7 了~~~

Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+
前端 jQuery 寫(xiě)法

直接看代碼吧：

$.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，這里代表使用跨域請(qǐng)求

xhrFields: {withCredentials: true}，這樣配置就可以把 cookie 帶過(guò)去了，不然我們連 session 都沒(méi)法維護(hù)，很多人都栽在這里。當(dāng)然，如果你沒(méi)有這個(gè)需求，也就不需要配置這個(gè)了。

后端 SpringMVC 配置

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

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

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

public class CrossDomainFilter extends OncePerRequestFilter {
  @Override
  protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
    response.addHeader("Access-Control-Allow-Origin", "*");// 如果提示 * 不行，請(qǐng)往下看
    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 的，也可以通過(guò)配置 shiro 過(guò)濾器的方式，這里就不介紹了。

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

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

前端非 jQuery 寫(xiě)法

jQuery 一招鮮吃遍天的日子是徹底不在了，這里就說(shuō)說(shuō)如果不使用 jQuery 的話，怎么解決 post 跨域的問(wèn)題。

來(lái)一段原生 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 用來(lái)跨域請(qǐng)求的
    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 對(duì)象。IE 使用的是 XDomainRequest。

總結(jié)

以上就是本文關(guān)于快速解決跨域請(qǐng)求問(wèn)題:jsonp和CORS的全部?jī)?nèi)容，希望對(duì)大家有所幫助。感興趣的朋友可以繼續(xù)參閱本站其他相關(guān)專題，如有不足之處，歡迎留言指出！

最新評(píng)論