搞定所有的跨域请求问题: jsonp & CORS

不念不忘少年蓝@ 2022-05-16 04:15 308阅读 0赞

网上各种跨域教程，各种实践，各种问答，除了简单的 jsonp 以外，很多说 CORS 的都是行不通的，老是缺那么一两个关键的配置。

本文解决跨域中的 get、post、data、cookie 等这些问题。

本文只会说 get 请求和 post 请求，读者请把 post 请求理解成除 get 请求外的所有其他请求方式。

## **JSONP** ##

前端 jQuery 写法  
后端 SpringMVC 配置  
后端非 SpringMVC 配置

--------------------

## CORS ##

前端 jQuery 写法  
后端 SpringMVC 配置  
前端非 jQuery 写法

--------------------

## JSONP ##

JSONP 是 JSON 的一种使用模式，可以解决主流浏览器的跨域数据访问问题。**其原理是根据 XmlHttpRequest 对象受到同源策略的影响**，而 `<script>` 标签元素却不受同源策略影响，可以加载跨域服务器上的脚本，网页可以从其他来源动态产生 JSON 资料。用 JSONP 获取的不是 JSON 数据，而是可以直接运行的 JavaScript 语句。

但是 **只支持 get，只支持 get，只支持 get**。

注意一点，既然这个方法叫 jsonp，后端数据一定要使用 json 数据，不能随便的搞个字符串什么的，不然你会觉得结果莫名其妙的。  
**(1)前端 jQuery 写法**

$.ajax({ type: "get", url: baseUrl + "/jsonp/get", dataType: "jsonp", success: function(response) { $("#response").val(JSON.stringify(response)); }
    });

`dataType: "jsonp"`。  
否则会发生编译错误： parsererror Error: jsonpCallback was not called。除了这个，其他配置和普通的请求是一样的。  
（还可以使用 `<script>` 标签原生实现jsonp）  
[https://www.cnblogs.com/yoissee/p/5901677.html][https_www.cnblogs.com_yoissee_p_5901677.html]

**(2)后端 SpringMVC 配置**  
如果你也使用 SpringMVC，那么配置一个 jsonp 的 Advice 就可以了，这样我们写的每一个 Controller 方法就完全不需要考虑客户端到底是不是 jsonp 请求了，Spring 会自动做相应的处理。

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

**(3)后端非 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)+")";
        }
    }

**总结：**  
至此，我们了解了 JSONP 的原理以及实现方式，它帮我们实现前端跨域请求，但是在实践的过程中，我们还是可以发现它的不足：

*  只能使用 GET 方法发起请求，这是由于 script 标签自身的限制决定的。
 *  不能很好的发现错误，并进行处理。与 Ajax 对比，由于不是通过 XmlHttpRequest 进行传输，所以不能注册 success、 error 等事件监听函数。

--------------------

## CORS ##

CROS(Cross-Origin Resource Sharing:跨域资源共享)  
跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。**与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。**用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

**(1)前端 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 都没法维护，很多人都栽在这里。当然，如果你没有这个需求，也就不需要配置这个了。

**(2)后端 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", "*");
    }

**(3)前端非 jQuery 写法**  
jQuery 一招鲜吃遍天的日子是彻底不在了，这里就说说如果不使用 jQuery 的话，怎么解决 post 跨域的问题。大部分的 js 库都会提供相应的方案的，大家直接找相应的文档看看就知道怎么用了。

来一段原生 js 介绍下：

其中，Chrome，Firefox，Opera，Safari 这些「程序员友好」的浏览器使用的是 XMLHTTPRequest2 对象。IE 使用的是 XDomainRequest。

**CORS 与 JSONP 的对比**

*  CORS 除了 GET 方法外，也支持其它的 HTTP 请求方法如 POST、 PUT 等。
 *  CORS 可以使用 XmlHttpRequest 进行传输，所以它的错误处理方式比 JSONP 好。
 *  JSONP 可以在不支持 CORS 的老旧浏览器上运作。

[https_www.cnblogs.com_yoissee_p_5901677.html]: https://www.cnblogs.com/yoissee/p/5901677.html