网上各类跨域教程，各类实践，各类问答，除了简朴的 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 要领：

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    public JsonpAdvice(){
        // 这样假如请求中带 callback 参数，Spring 就知道这个是 jsonp 的请求了
        super("callback");
    }
}

CORS

Cross-Origin Resource Sharing

究竟 jsonp 只支持 get 请求，必定不能满意我们的所有的请求需要，所以才需要搬出 CORS。

海内的 web 开拓者照旧较量苦逼的，用户死不进级欣赏器，老板还死要开拓者做兼容。

CORS 支持以下欣赏器，今朝来看，欣赏器的问题已经越来越不重要了，连淘宝都不支持 IE7 了~~~

前端 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);
    }
}