搞定全部的跨域請求問題: jsonp & CORS

網上各類跨域教程，各類實踐，各類問答，除了簡單的 jsonp 之外，不少說 CORS 的都是行不通的，總是缺那麼一兩個關鍵的配置。本文只想解決問題，全部的代碼通過親自實踐。

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

本文只會說 get 請求和 post 請求，讀者請把 post 請求理解成除 get 請求外的全部其餘請求方式。

JSONP

jsonp 的原理很簡單，利用了【前端請求靜態資源的時候不存在跨域問題】這個思路。

可是 只支持 get，只支持 get，只支持 get。

注意一點，既然這個方法叫 jsonp，後端數據必定要使用 json 數據，不能隨便的搞個字符串什麼的，否則你會以爲結果莫名其妙的。

前端 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 會自動作相應的處理。

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    public JsonpAdvice(){
        // 這樣若是請求中帶 callback 參數，Spring 就知道這個是 jsonp 的請求了
        super("callback");
    }
}
複製代碼

以上寫法要求 SpringMVC 版本不低於 3.2，低於 3.2 的我只能說，大家該升級了。

後端非 SpringMVC 配置

之前剛工做的時候，Struts2 還紅遍天，幾年的光景，SpringMVC 就基本統治下來了國內市場。

偷懶一下，這裏貼個僞代碼吧，在咱們的方法返回前端以前調一下 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。

國內的 web 開發者仍是比較苦逼的，用戶死不升級瀏覽器，老闆還死要開發者作兼容。

CORS 支持如下瀏覽器，目前來看，瀏覽器的問題已經愈來愈不重要了，連淘寶都不支持 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 數據
        $("#response").val(JSON.stringify(response));
    }
});
複製代碼

dataType: "json"，這裏是 json，不是 jsonp，不是 jsonp，不是 jsonp。

crossDomain: true，這裏表明使用跨域請求

xhrFields: {withCredentials: true}，這樣配置就能夠把 cookie 帶過去了，否則咱們連 session 都無法維護，不少人都栽在這裏。固然，若是你沒有這個需求，也就不須要配置這個了。

後端 SpringMVC 配置

對於大部分的 web 項目，通常都會有 mvc 相關的配置類，此類繼承自 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 過濾器的方式，這裏就不介紹了。

注意了，我說的是很籠統的配置，對於大部分項目是能夠這麼籠統地配置的。文中相似 「*」 這種配置讀者應該都能知道怎麼配。

若是讀者發現瀏覽器提示不能用 ‘*’ 符號，那讀者能夠在上面的 filter 中根據 request 對象拿到請求頭中的 referer（request.getHeader("referer")），而後動態地設置 "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：今天終於知道爲何有時候會提示咱們 * 不支持了，原來是隻要前端寫了 withCredentials: true 那麼瀏覽器就會提示這個，一種辦法就是這裏說的使用動態構造 origin 的方式，另外一種辦法就是跨域不傳 cookie，讓前端把 cookie 要傳的信息(如 sessionId/accessKey) 放到 header 中或者直接寫在 request 的參數裏。

前端非 jQuery 寫法

jQuery 一招鮮吃遍天的日子是完全不在了，這裏就說說若是不使用 jQuery 的話，怎麼解決 post 跨域的問題。大部分的 js 庫都會提供相應的方案的，你們直接找相應的文檔看看就知道怎麼用了。

來一段原生 js 介紹下：

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // 若是有 withCredentials 這個屬性，那麼能夠確定是 XMLHTTPRequest2 對象。看第三個參數
        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，Firefox，Opera，Safari 這些「程序員友好」的瀏覽器使用的是 XMLHTTPRequest2 對象。IE 使用的是 XDomainRequest。

我想，對於 95% 的讀者來講，說到這裏就夠了，我就不往下說了，讀者若是有須要補充的，請在評論區留言。

（全文完）