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

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

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

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

• JSONP
  • 前端 jQuery 寫法
  • 後端 SpringMVC 配置
  • 後端非 SpringMVC 配置
• CORS
  • 前端 jQuery 寫法
  • 後端 SpringMVC 配置
  • 前端非 jQuery 寫法

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", "*");
}

前端非 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。