搞定全部的跨域请求问题: 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。