搞定全部的跨域请求问题: 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% 的读者来讲，说到这里就够了，我就不往下说了，读者若是有须要补充的，请在评论区留言。

（全文完）